## イベント リスナーで変数値を保持する方法: 値渡しか参照渡しか?

イベント リスナーでの変数値の保持: 値による受け渡しと参照による受け渡し

ループ内で変数を代入し、イベント リスナーを追加する場合、変数の値または参照をリスナーに渡すかどうかを検討することが重要です。

あなたの場合、各リスナーが i の時点で意図された値ではなく最終的な値を使用しているという問題が発生しました。リスナーの作成。この問題は、JavaScript が var キーワードを使用した変数ホイスティングを使用しているために発生します。この場合、変数はスコープの先頭で宣言され、グローバル スコープが与えられます (ブロック内で宣言されている場合でも)。

これに対処するには、次のようにします。

let または const によるブロック スコープの使用:

最新のブラウザでは、let または const キーワードを利用してブロック スコープの変数を作成できます。これにより、変数が含まれるブロック内で宣言され、そのブロックの外からはアクセスできないことが保証されます。

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

匿名関数を使用したクロージャの作成:

ブロック スコープの変数はサポートされていないため、クロージャを作成して、反復ごとに i の現在の値を保存できます。これには、イベント リスナーの作成を匿名関数内にラップし、i をパラメーターとして渡すことが含まれます。

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

i を最初の引数として匿名関数に渡すことで、実質的に i の値をリスナーへの関数呼び出しの時間。

以上が## イベント リスナーで変数値を保持する方法: 値渡しか参照渡しか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。