ループ内でクリック ハンドラーを割り当てるときにクロージャの落とし穴を回避するにはどうすればよいですか?

よくある落とし穴: ループ内のクロージャ

ループを使用してクリック ハンドラーを複数の要素に割り当てると、簡単に罠に陥ります。意図せずクロージャを作成してしまうこと。これにより、提供されている JavaScript コードに示されているように、予期しない動作が発生する可能性があります。

指定された例では、問題は各要素のクリック ハンドラー関数にあります。これをループ内で囲むことにより、ループから変数 i を参照するクロージャを作成します。ただし、i は反復ごとに変化するため、クリック イベントが発生すると、特定の要素の意図した値ではなく、常に i の最終値 (この場合は 20) にアクセスします。

解決策:

このクロージャーの問題を回避するには、目的の値をカプセル化するコールバック関数を作成する必要があります。即時呼び出し関数式 (IIFE) を使用すると、次のことを実現できます。

function createCallback(i) {
  return function () {
    alert('you clicked ' + i);
  };
}

$(document).ready(function () {
  for (var i = 0; i <p>このアプローチでは、コールバック関数がループ反復ごとに i の現在値を取得し、正しい値が確実に渡されるようにします。クリック ハンドラー。</p><p><strong>ES6 を使用した最新のソリューション:</strong></p><p> ES6 では、let キーワードを使用して、ループ反復ごとにローカル変数を作成できます。これにより、コールバック関数による回避策が不要になります。</p><pre class="brush:php;toolbar:false">for (let i = 0; i <p>このソリューションはより簡潔で、ループ内でクリック イベントを処理する際にクロージャの問題が発生する可能性を回避します。</p>

以上がループ内でクリック ハンドラーを割り当てるときにクロージャの落とし穴を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。