20440


スニペットで再現する事を確認済みです。  
コードの中のコメントの通りですが、new xNode(1) new xNode(2) new
xNode(3)と擬似クラスのインスタンスを作り、その中でコールバックを指定しています。  
それぞれ別のインスタンスなので、new xNode(1)の中では常にパラメーターは1であって欲しいのですが、何故か最後の3で全て上書きされてしまいます。

<http://qiita.com/ukiuni@github/items/463493a690265cec8bb7>  
この記事に書かれている事と似ていると思うのですが、newしているので違う話だと判断しています。  
コードの切り出しはしたのですが、それでもこの長さになってしまいました。  
new xNode(id);で指定したidの変数をコールバックから使うにはどうしたらよいでしょうか。よろしくお願いします。  
chrome 47で確認をしました。

[code]

    <script>
    br=function(){return document.createElement("br");};
    nodes=[];
    window.addEventListener("DOMContentLoaded", function(){
     xtest=(function(){
      var proto=Object.create(HTMLElement.prototype, {
       createdCallback: {
        value: function() {
         var t = document.querySelector('template');
         var clone = document.importNode(t.content, true);
         var shadowRoot=this.createShadowRoot();
         shadowRoot.appendChild(clone);
         this.cb=function(){};
         this.setCallback=function(ccc){
          cb=ccc;
         };
         this.callCallback=function(){
          cb();
         };
         this.setButtonText=function(name){
          this.shadowRoot.querySelector("#push").innerText=name;
         };
        }
       },
       attachedCallback : {
        value: function(){
         this.shadowRoot.querySelector("#push").addEventListener("click",this.callCallback);
        }
       },
       attributeChangedCallback : {
        value: function(attrName, oldVal, newVal){
        }
       },
       detachedCallback : {
        value: function(){
        }
       },
      });
      return document.registerElement('x-test',{prototype:proto});
     })(); // (0)ここでx-testのカスタムhtmlタグを登録
     newCreate(1); // (1)パラメーターが違う3つの処理
     newCreate(2);
     newCreate(3);
    }, false);
    function newCreate(id){
     var addNew=new xNode(id); // (2)ここでnew xNodeとしている！
     nodes.push(addNew);
     document.body.appendChild(addNew.dom());
     document.body.appendChild(br());
    }
    function xNode(id){// (3)このメソッドは常にnew xNode(id)でコールされているから、変数idやalertTextはそれぞれ違うスコープを持って欲しい
     var node;
     var alertText=id+"です";
     var init=function(){ // (4)一番下のinitから来て・・・ xtestのカスタムhtmlタグのインスタンスを作る。
      node=new xtest();
      node.setButtonText(alertText);
      node.setCallback(function(){
       alert(alertText);//(5)ボタンが押されたらここに処理が来る。alertTextが常に"3です"になるのは何故？
      });
     };
     this.number=function(){
      return node.number;
     };
     this.dom=function(){
      return node;
     };
     this.callCallback=function(){
      node.callCallback();
     };
     init();
    };
    </script>
    <template id="cells-to-repeat">
     <label><button id="push"></button></label>
    </template>
    どれを押しても「3です」としか表示されない。<br>
[/code]


CC BY-SA 3.0
2015-12-28T16:08:01.523
20437
2015-12-28T23:27:17.313
805
question
javascript
JSの擬似クラスでクロージャーの値が上書きされてしまう


自己解決しました。  
15行目付近の”cb=ccc;”としている箇所。代入先のcbがグローバル変数のcbになっていました。  
13行目で定義したthis.cb=func‌​tion(){};を上書きしているつもりだったけど、そっちじゃなくてグローバル変数上のを書き換えていたと。

なら常に同じ変数に上書きを繰り返して、最後の3です の場合のみになっちゃうのも当然でした


CC BY-SA 3.0
2015-12-28T23:27:17.313
20440
2015-12-28T23:27:17.313
805
20437
answer