JavaScript ループでクロージャを使用する場合、各クロージャが正しい値を確実に取得できるようにするにはどうすればよいでしょうか?

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

JavaScript では、ループ内でクロージャを使用するときに一般的な問題が発生します。クロージャーによってキャプチャされた変数は、予期された値ではありません。

問題:

var キーワードを使用してループ内で関数を定義すると、すべての関数がループ外の同じ変数を参照します。ループ。これにより、以下のコードに見られるように、予期しない結果が生じる可能性があります:

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

このコードを実行すると、0 から 2 に増加することが期待されているにもかかわらず、「My value: 3」が 3 回出力されます。

解決策:

ES6 解決策: Let

ECMAScript 6 (ES6) では、let キーワードにより変数のブロック スコープが導入されます。これでこの問題は解決します。 let を使用すると、ループの各反復でスコープがループに限定された新しい変数 i が作成されます。

<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">var funcs = [];
[0, 1, 2].forEach(function(i) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
});</code>

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

古典解決策は、ループの外で変数を特定の値にバインドするクロージャを作成することです。これは、目的の値をキャプチャする新しい関数を返すことによって実現されます。

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

i を引数として内部関数に渡すことで、各クロージャが正しい値をキャプチャすることが保証されます。

以上がJavaScript ループでクロージャを使用する場合、各クロージャが正しい値を確実に取得できるようにするにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。