click addListenerでforloopを実装する

Question

私はイオンマップにGoogleマップを実装していますが、マーカーとインフォウィンドウを実装しようとすると問題が発生しています。

あなたは以下を参照することができますように、私はマーカーのそれぞれに情報ウィンドウを実装しようとしたら、それは意図したとおりに動作します。

this.markerStart[0].addListener('click',()=>{ 
      console.log('clicked') 
      this.popuparray[0].open(this.map,this.markerStart[0]); 
     }) 
     this.markerStart[1].addListener('click',()=>{ 
      console.log('clicked2222') 
      this.popuparray[1].open(this.map,this.markerStart[1]); 
     }) 

が、私はforループを使用するように変更しようとすると、それは動作しません。 。

まったく同じように見えますが、なぜ動作しないのか分かりません。

//ここで、this.markerStart.lengthは2ですが、forループでは以下のようには動作しません。

console.log(this.markerStart); 
    console.log(this.markerStart.length); 
    console.log("this.markerStart") 
    for(var j=0; j<this.markerStart.length; j++){ 
     this.markerStart[j].addListener('click',()=>{ 
      console.log(j); 
      //only log 2 ...which is I don't understand. why log 2? 
      // j should be 0 and 1...because this.markerStart.length is 2 
      this.popuparray[j].open(this.map,this.markerStart[j]) 

     }) 
    } 

私もこれを試してみました：

for(var j=0; j<2; j++){ 

     this.markerStart[j].addListener('click',()=>{ 
      console.log(j); 
     }) 
    } 

を、私は私が最初のマーカーをクリックしたとき、それは1を記録しなければならないし、第2のマーカーをクリックしたときに、それは2を記録することが、その唯一の必要があることを最初に考えましたロギング2.

Answer 1

最後の解決策はclosureですが、なぜ期待した結果が得られないのですか？ varの代わりにletを使用すると動作します。 varは変数を保持し、繰り返しごとに変数jのみを変更します。したがって、すべてjという変数を参照してください。その値は2です。反復ごとにletを使用すると、新しい変数が作成され、各関数は自身の変数jを持ちます。

for(let j = 0; j < 2; j++){ 
    this.markerStart[j].addListener('click',() => console.log(j)); 
} 

それとも、ES6下の環境にしたい場合は、あなただけのforループでlet j=0;でvar j=0;を交換し、それがとして動作するリスナー

for(var j = 0; j < 2; j++){ 
    ((k) => this.markerStart[k].addListener('click',() => console.log(k)))(j); 
} 

Answer 2

ためのスコープの変数を作成するために生命維持を使用することができますあなたは期待した。

letは、スコープが制限されている変数を、それが使用されているブロック、ステートメント、または式に宣言するためです。一方、varは、変数をグローバルに、またはブロックスコープに関係なく関数全体に局所的に定義します。