JavaScript のループ内で関数を作成するときにクロージャの問題を回避するにはどうすればよいですか?

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

JavaScript のループ内で関数を作成する場合、クロージャの可能性を認識することが重要ですこれらの関数で使用される変数が誤って同じ値にバインドされる可能性がある問題。これにより、特に遅延が関係する場合、予期しない動作が発生する可能性があります。

問題ステートメント

次のコードを検討してください:

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

意図した出力は:

<code>My value: 0
My value: 1
My value: 2</code>

ですが、このコードは実際には次のように出力します:

<code>My value: 3
My value: 3
My value: 3</code>

この問題は、匿名関数内の変数 i がループ外の同じ変数にバインドされているために発生します。 。その結果、各関数が実行されるとき、i の最終値が使用されます。

ES6 解決策: let

ECMAScript 6 (ES6) 、let キーワードを使用すると、ブロック スコープの変数が許可されます。ループ内で let を使用すると、反復ごとに新しい変数が作成され、クロージャの問題が解決されます。

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

ES5.1 解決策: forEach

状況主に配列を反復処理している場合、Array.prototype.forEach 関数はクリーンなソリューションを提供できます。

<code class="js">someArray.forEach(function(arrayElement) {
  // ... code for this one element
});</code>

コールバック関数の各呼び出しは独自のクロージャとなり、渡されるパラメータが特定のものであることが保証されます。

古典的な解決策: クロージャ

クロージャの問題を回避するもう 1 つの方法は、古典的なクロージャを使用することです。これには、各関数内の変数を別の関数にバインドすることが含まれます。不変の値。

<code class="js">function createfunc(i) {
  return function() {
    console.log("My value: " + i);
  };
}</code>

以上がJavaScript のループ内で関数を作成するときにクロージャの問題を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。