JavaScript のループにおけるクロージャの問題を回避するには?

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

ループを反復処理して匿名関数を保存するときに発生する問題は、これらの関数内の変数ループの外で同じ変数を参照します。これにより、これらの変数の値をログに記録しようとすると予期しない動作が発生する可能性があります。

解決策 1: ES6 Let ステートメント

ES6 では let キーワードが導入され、新しいループの各反復の変数スコープ。これにより、各匿名関数が独自の個別の変数を持つことが保証され、クロージャの問題が解決されます。

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

解決策 2: ES5.1 ForEach Method

主に次のような状況の場合配列の反復では、forEach メソッドが簡単な解決策を提供します。コールバック関数の各反復には独自のクロージャがあり、配列の現在の要素を受け取ります。

<code class="js">var someArray = [...];
someArray.forEach(function(arrayElement) {
  // Code for the specific array element
  // ...
});</code>

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

別の解決策は次のとおりです。各関数内の変数を関数外の個別の不変値にバインドします。これは、ヘルパー関数

<code class="js">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 サイトの他の関連記事を参照してください。