###thisとクロージャについて
JavaScript初級者から中級者になろう 九章第五回 クロージャ
上記のサイトでbindとthisについての説明があるのですが
分からない部分があるので教えて下さい。
###分からない部分
サイト内で以下の2つのコードが出てきます。
// コード1 function MyDiv(name){ this.div = document.createElement("div"); this.name=name; this.div.textContent="このdiv要素は"+name+"です"; document.body.appendChild(this.div); this.div.addEventListener('click',function(e){ console.log(this.name); },false); } var div1 = new MyDiv("div1");
// コード2 function MyDiv(name){ this.div = document.createElement("div"); this.name=name; this.div.textContent="このdiv要素は"+name+"です"; document.body.appendChild(this.div); this.div.addEventListener('click',(function(i){ return function(e){ console.log(i.name); }; })(this),false); } var div1 = new MyDiv("div1");
この2つのコードを比較して「コード1を実行するとログには undefined
が表示されるが、コード2を実行するとログに div1
が表示される」というものです。
###質問1
サイト内では
(コード1について)クリックすると表示された値はundefinedです。 ① これは、thisのプロパティとしてnameなどというものは無かった、 ② つまりthisは、MyDivのインスタンスを表していないということです。 ③ これはひょっとすると、イベントとして登録された関数(イベントハンドラ)が インスタンスのメソッドでは無いからかもしれません。
と書かれています。
この文章中の②と③がよく分かりません。
②「thisはMyDivのインスタンスを表していない」とは具体的にどういうことですか?
コード1の最後の行でvar div1 = new MyDiv("div1");
と書いているけど、関数の引数nameにdiv1が入っていないということですか?
③「イベントとして登録された関数が "インスタンスのメソッドではない" からかも」とはどういうことですか?
###質問2
また、コード2の下から3行目、第2引数のthisについてサイトで
「引数iにthisを渡している」
「外側の無名関数function(i)
で利用できる変数とは変数iです。外側の無名関数が呼ばれた時点で、その引数はthisです。
このthisはコンストラクタ内で使用されたものであるから、このthisは確かにインスタンスを表します。つまり、ここでは変数iはMyDivのインスタンスであるのです。」
とありますが、この部分も理解できません。
初歩的な質問ですみません。よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/09/21 04:34