ループ内の閉鎖汚染を克服する方法: 実践ガイド-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-10-16 17:50:02

オリジナル

549 人が閲覧しました

How to Overcome Closure Pollution in Loops: A Practical Guide

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

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

問題

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

<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 に増分されます。

`let`ES6 の解決策:

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

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

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

ログイン後にコピー

`forEach`ES5.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 サイトの他の関連記事を参照してください。