JavaScript イベント リスナーで変数値を保持する方法: ブロック スコープの変数またはクロージャ?

JavaScript でイベント リスナーの変数値を保持する方法

次のコード スニペットを考えてみましょう。

<code class="javascript">for (var i = 0; i < results.length; i++) {
  marker = results[i];
  google.maps.event.addListener(marker, 'click', function() {
    change_selection(i);
  });
}

Inこのコードでは、イベント リスナーで使用される i の値は、常にループ終了後の results.length の最終値になります。この問題を解決するには、作成中に i の値をイベント リスナーに渡す必要があります。

ブロック スコープ変数の使用 (ES6 以降)

In最新のブラウザでは、let や const などのブロック スコープの変数を使用できます。これらの変数は、定義されているブロック内でのみアクセスできます。ブロック スコープの変数を使用すると、イベント作成時の i の値が確実に保持されます。

<code class="javascript">for (let i = 0; i < results.length; i++) {
  let marker = results[i];
  google.maps.event.addListener(marker, 'click', () => change_selection(i));
}</code>

クロージャの作成 (古いブラウザ)

ブロックスコープ変数をサポートしていない古いブラウザでは、i の値を保持するクロージャを作成できます。クロージャは、別の関数をカプセル化し、ネストされたスコープを作成する関数です。 i を最初の引数として匿名関数に渡すことで、i の値を保持するクロージャを作成できます。

<code class="javascript">for (var i = 0; i < results.length; i++) {
  (function (i) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() {
      change_selection(i);
    });
  })(i);
}</code>

ブロック スコープ変数またはクロージャ手法のいずれかを使用することで、次のことを保証できます。各イベント リスナーは、意図された i の値を使用します。

以上がJavaScript イベント リスナーで変数値を保持する方法: ブロック スコープの変数またはクロージャ?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。