jQuery の $.proxy() を理解する質問する

Question

this最終的に、関数内のの値が希望する値になることを保証します。

一般的な例は、ハンドラーsetTimeout内で実行されるですclick。

これを取る：

$('#myElement').click(function() {
        // In this function, "this" is our DOM element.
    $(this).addClass('aNewClass');
});

意図は非常に単純です。myElementがクリックされると、クラスが取得されますaNewClass。ハンドラーの内部では、thisクリックされた要素を表します。

しかし、クラスを追加する前に少し遅延が必要な場合はどうすればよいでしょうか。setTimeoutこれを実現するためにを使用することもできますが、問題はにどのような関数を与えてもsetTimeout、その関数内のの値が要素ではなくにthisなってしまうことです。window

$('#myElement').click(function() {
    setTimeout(function() {
          // Problem! In this function "this" is not our element!
        $(this).addClass('aNewClass');
    }, 1000);
});

代わりに、を呼び出して$.proxy()、に割り当てたい関数と値を送信するthisと、その値を保持する関数が返されます。

$('#myElement').click(function() {
   // ------------------v--------give $.proxy our function,
    setTimeout($.proxy(function() {
        $(this).addClass('aNewClass');  // Now "this" is again our element
    }, this), 1000);
   // ---^--------------and tell it that we want our DOM element to be the
   //                      value of "this" in the function
});

したがって、$.proxy()関数と、に必要な値を指定すると、が適切に設定されているthisことを確認する関数が返されますthis。

どうやってやるの？匿名関数を返すだけで、通話メソッドを使用して関数を実行し.apply()、の値を明示的に設定しますthis。

返される関数を簡略化すると次のようになります。

function() {
    // v--------func is the function we gave to $.proxy
    func.apply( ctx );
    // ----------^------ ctx is the value we wanted for "this" (our DOM element)
}

したがって、この匿名関数はに渡されsetTimeout、適切なコンテキストで元の関数を実行するだけですthis。

Answer 1