ループ内の閉鎖汚染を克服する方法: 実践ガイド

ループ内のクロージャ: クロージャ汚染を解決するための実践ガイド

プログラミングにおいて、クロージャは外部スコープから変数をキャプチャする際に重要な役割を果たします。ただし、ループ内で使用すると、クロージャ汚染として知られる予期しない結果が生じる可能性があります。この記事では、この問題を調査し、それを解決するための実用的な解決策を提供します。

問題

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

<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]();
}</code>

残念ながら、このコードの出力は次のとおりです:

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

ではなく:

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

問題

この問題は、ループ内で宣言された各関数が外側のスコープから同じ i 変数をキャプチャするために発生します。 2 番目のループ内で関数が呼び出されると、関数はすべて同じ i を参照します。この

は、実行されるまでに 3 に増分されます。

letES6 の解決策:

let ES6 では、ブロック スコープの変数を作成する let キーワードが導入されました。ループ内で i を使用すると、各反復が独自の

変数を持つようになり、クロージャ汚染の問題が解決されます:

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

forEachES5.1 解決策:

forEach別の配列の解決策は、

メソッドを使用することです。

<code class="javascript">var someArray = [/* values */];

someArray.forEach(function(element) {
  // ...code specific to this element...
});</code>

forEach

ループの各反復では、独自のクロージャが作成され、その反復に固有の配列要素がキャプチャされます。

クラシック解決策: クロージャ

古典的な解決策では、変数を関数の外側の別の不変の値に手動でバインドします。

<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);
}

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

i

変数を引数として内部関数に渡すことによって、関数の場合、反復ごとに新しいクロージャを作成し、各関数が独自の独立した値を参照するようにします。

以上がループ内の閉鎖汚染を克服する方法: 実践ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。