ループ内の JavaScript クロージャは変数のスコープを壊す可能性がありますか?

ループ内の JavaScript クロージャ: 簡単な実践例

JavaScript では、ループを使用してインデックスまたは値を記録する関数を作成するときに一般的な問題が発生します。異なる値をログに記録するつもりでも、変数スコープの性質により、すべての関数が同じ値をログに記録してしまうことがよくあります。

問題

次のコードを考えてみましょう:

<code class="javascript">var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}

for (var j = 0; j < 3; j++) {
  funcs[j](); // Outputs: "My value: 3" three times
}</code>

「私の値: 0」、「私の値: 1」、「私の値: 2」を出力する代わりに、「私の値: 3」を 3 回記録します。この動作は、イベント リスナーや非同期コードの使用など、さまざまなシナリオにわたって継続します。

解決策 1: ES6 let

ES6 では、囲んでいるブロックをスコープとする変数を作成する let キーワードを導入しています。ループ内で let を使用すると、各関数が独自の変数を持つようになります。

<code class="javascript">for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

解決策 2: ES5.1 forEach

配列の反復処理を伴うシナリオの場合、forEachメソッドは便利な解決策を提供します。 forEach ループ内の各コールバックには独自のクロージャがあり、反復ごとに一意の変数を提供します。

<code class="javascript">someArray.forEach(function(arrayElement) {
  console.log("My value:", arrayElement);
});</code>

解決策 3: 従来のクロージャ

古い JavaScript バージョンでは、クロージャを使用できます。変数を関数内の特定の値にバインドするには:

<code class="javascript">var funcs = [];

function createfunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}</code>

以上がループ内の JavaScript クロージャは変数のスコープを壊す可能性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。