入れ子になった JavaScript 関数で `var that = this;` を使用するのはなぜですか?

入れ子関数で this にアクセスする: var that = this;

JavaScript では、this のスコープと値を理解することが重要です。次のコード スニペットを考えてみましょう:

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

なぜこれが宣言され、 this の値が割り当てられているのですか?

この手法の目的を理解するために、シナリオを視覚化してみましょう:

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

  colours.forEach(function() {
    // this is undefined within this inner function
    // that still refers to the clicked element
  });
});

forEach コールバック内の this は、クリックされた要素ではなく、現在の配列要素を参照します。ただし、クリックされた要素への参照は維持されます。

ネストされた関数に移動すると、このスコープが変更される可能性があり、元の値にアクセスすることが困難になります。 this を that にエイリアスすると、元の値に引き続きアクセスできるようになります。

エイリアスとして that を使用することが常に最適であるとは限らないことに注意してください。特に複雑な関数では、何を参照しているのかを明確に示す、より説明的なエイリアスを使用することをお勧めします。

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