JavaScript の入れ子関数で `var that = this;` を使用する理由

「var that = this;」とは何ですか?構文 JavaScript で実現しますか?

JavaScript では、次のようなコード ブロックがよく見られます:

function Somefunction(){
   var that = this; 
   ... 
}

この構文は、this の値を that という名前の変数に割り当てます。 。このイディオムの目的は、ネストされた関数内で正しい this コンテキストへの参照を保持することです。

その必要性を説明するために、次の例を考えてみましょう。

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});

匿名関数内forEach に渡されると、スコープが変更されたため、this キーワードはクリックされた要素を参照しなくなります。これをそれに割り当てると、ネストされた関数内で必要な参照を保持できるようになります。

$('#element').click(function(){
    // this is a reference to the element clicked on

    var that = this;

    $('.elements').each(function(){
        // this is a reference to the current element in the loop
        // that is still a reference to the element clicked on
    });
});

実際には、コードの可読性を高めるために、これに対してより説明的なエイリアスを使用することが有益です。たとえば、上記の例では、clickedEl の方が適切な選択となります。

以上がJavaScript の入れ子関数で `var that = this;` を使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。