javascript - プロトタイプでこのキーワードを上書きするJQuery

Question

JQuery はthis、イベントハンドラーとして追加すると、インスタンスメソッドのキーワードを上書きするようです。なぜこれが起こるのですか？以下のコード:

function Foo() {};
Foo.prototype.bark = function() {
    console.log(this);
};

var foo = new Foo();

$("#b").click(foo.bark);

クリック時の出力: <button id="b" type="button">

thisただし、JQuery は以下のコードのキーワードをオーバーライドしていないようです。

$("#b").click(function() { foo.bark(); });

クリック時の出力:

`Foo { bark=function()}`

score 5 · Accepted Answer

これは予期される動作です。イベントリスナーとして割り当てられたすべての関数は、 thisイベントが発生した要素インスタンスを指します。

次のようなハンドラーとして匿名ラッパー関数を使用することで、これを克服できます。

$("#b").click(function() {foo.bark() });

score 2 · Accepted Answer

これはclick、要素への参照をそのハンドラーに渡すためです(あなたの場合は樹皮です)

これを行う場合：

$("#b").click(function(){
  foo.bark();
});

thisでクリックした要素を参照するために使用することはできませんbark()

score 1 · Accepted Answer

handler パラメータはコールバック関数を取ります... ハンドラ内では、キーワードthisはハンドラがバインドされている DOM 要素を参照します。

score -1 · Accepted Answer

あなたの問題の解決策は$.proxy(). 詳細については、こちらをご覧ください。

試す$('#b').on('click', $.proxy( foo.bark, this ) )

編集：実際にはプロキシ関数の正しい呼び出しは$.proxy( foo.bark, foo );

4 に答える 4