ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で `var that = this;` を使用する理由

JavaScript で `var that = this;` を使用する理由

Linda Hamilton
リリース: 2024-12-18 02:30:10
オリジナル
460 人が閲覧しました

Why Use `var that = this;` in JavaScript?

「var that = this;」を理解するJavaScript では

JavaScript では、「this」キーワードは現在のオブジェクトを表します。 「this」を「var that」に割り当てると、開発者は、「this」が変更される可能性がある入れ子関数内であっても、後でアクセスできる元のオブジェクト参照への参照を維持できます。

次のコード スニペットを考えてみましょう。

function Somefunction(){
   var that = this; 
   ... 
}
ログイン後にコピー

ここで、「this」を「that」に代入すると、「Somefunction」スコープ内で「that」が常に元のオブジェクトを参照するようになります。 実例。これは、ネストされた関数の呼び出し後に 'this' 参照が変更される可能性があるクロージャまたはイベント ハンドラーを操作する場合に有益です。

説明のために、要素の 'click' イベントをリッスンする関数があると仮定します。

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
    });
});
ログイン後にコピー

イベント ハンドラー内では、「this」はクリックされた要素を指しますが、内部の「forEach」関数内では、 「これ」は不定になります。これを「that」にエイリアスすることで、クリックされた要素への元の参照に引き続きアクセスできます。

結論として、「var that = this;」です。現在のオブジェクトへの一貫した参照が確実に維持されるため、「this」が動的に変更される可能性があるイベント処理またはクロージャーのシナリオで特に役立ちます。ただし、コードの意図をより明確にするために、明確にするために、「clickedEl」や「currentElement」などのより説明的なエイリアスの使用を検討してください。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート