「var that = this;」の目的を理解するJavaScript 内

JavaScript を使用する場合、「var that = this;」というステートメントを含むコード スニペットに遭遇することがあります。この構造は、入れ子関数内、特にイベント ハンドラー内で「this」のコンテキストを保持する上で重要な役割を果たします。

JavaScript では、「this」キーワードは、現在のコンテキスト、または使用されているコードを所有するオブジェクトを表します。ただし、ある関数が別の関数内で呼び出される場合、「this」の値は変更されます。これは、特にイベント ハンドラーがコールバック内に存在するイベント ドリブン コードで、予期しない動作を引き起こす可能性があります。

「this」を「that」に割り当てる目的は、オブジェクトの現在のコンテキストが失われる前にキャプチャすることです。範囲の変更に。 「this」を「that」にエイリアスすることにより、ネストされた関数内でも「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
    });
});

このコードでは、イベント ハンドラー関数は、「this」キーワードを通じてクリックされた要素にアクセスします。ただし、入れ子関数 (each()) 内では、「this」の値はループ内の現在の要素を参照します。外部関数で「this」を「that」としてキャプチャすると、最初にクリックされた要素に引き続きアクセスできます。

読みやすさを考慮して、「that」以外のエイリアスを使用することをお勧めします。上の例では、「clickedEl」のようなわかりやすいエイリアスを使用すると、変数が何を参照しているのかがより明確になります。

結論としては、「var that = this;」となります。これは、さまざまなスコープにわたって「this」の値を保持するための JavaScript の一般的な手法です。これにより、入れ子関数が呼び出された場合でも、オブジェクトの元のコンテキストが確実に維持されます。