[解決済み] jQueryの$.proxy()を理解する

質問

から ドキュメント と理解しています。 .proxy() は、引数として渡された関数のスコープを変更します。どなたか、もっとうまく説明していただけませんか？なぜこのようなことをしなければならないのでしょうか？

どのように解決するのですか？

最終的に何をするかというと、このメソッドは 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 のコンテキストを使用します。