混乱 - "this"＆closures - バインディング

Question

私はJavaScriptでarticleをthisに読んでいます。著者は、次のコードが悪いと言っている：

Cart = { 
    items: [1,4,2], 
    onClick: function() { 
    // Do something with this.items. 
    } 
} 
$("#mybutton").click(Cart.onClick); 

彼はのonClickを呼び出すときclickイベントはCartオブジェクトについて知らないのでthis.itemsが、私はそれがあることを期待し[1,4,2]配列ではないだろうと述べています。

このコードではクロージャを作成して修正していますが、次のコードが問題をどのように修正するのか分かりません。どのような文脈では

$("#mybutton").click(function() { Cart.onClick() }); 

---

1）（そうでない場合はCart）我々は最初の例を使用している場合にいるthisことを行います。

2）2番目の例で問題が解決するのはなぜですか？

Answer 1

thisに関するいくつかの良い詳細は、「How does the “this” keyword work?」

に与えられた。しかし、重要な部分はthisの値はときとfunctionが呼び出される方法によって決定されていることです。さ

---

1. 、引数としてメソッド自体を通過する物体からアクセスし、それが別の行為になる呼び出すことによって。この分離は、それが来たオブジェクトの軌跡を失う方法です。Cart。

   呼び出しはjQueryによって実行されます。そして、イベントハンドラ、it determines the value of this to be the referenced element（この場合、$("#mybutton")で一致）の場合：jQueryのハンドラを呼び出すと

、thisキーワードは、イベントが配信されている要素への参照です。 [..]

よりもむしろ方法自体を渡す

、これはjQueryの代わりに起動する機能をラップ、代替を提供します。その関数の本体の中で、メソッドへのアクセスと呼び出しは、単一のステートメントで結合されます。

それらを組み合わせると、言語自体は、の前にthisの値を（最後の）Objectとして決定します。

Answer 2

this常に関数呼び出しのコンテキストです。このため、$("#mybutton").click(Cart.onClick);はmybuttonオブジェクトを関数thisとして送信します。 2番目の例では、Cart.onClick()をそれ自身の文脈で呼び出します。 thisはCartです。

$("#mybutton").click(Cart.onClick.bind(Cart));の最初の例を修正して、コンテキストをCartオブジェクトに強制することができます。

<button onclick="Cart.onClick()...を試した場合、thisはwindowsオブジェクトです。

私の説明があなたに役立つことを願っています。