なぜこのループは停止できませんか？

Question

私はjquery（jquery-2.1.1）とコンストラクタ関数を使ってhtmlを構築しようとしています。しかし、このメソッドをforループで試してみると、ループを止めることはできません。それはなぜ起こるのか教えてもらえますか？

ここにコードがあります。どうもありがとう。

function tag() { 
    this.addClass = function(...theArgs) { 
     for (index in theArgs) { 
      this.$html.addClass(theArgs[index]); 
     }  
    } 

    this.setAttr = function(attr, value) { 
     this.$html.attr(attr, value); 
    } 

    this.append = function(...theArgs) { 
     for (index in theArgs) { 
      this.$html.append(theArgs[index]); 
     } 
    } 

    this.find = function(value) { 
     return this.$html.find(value); 
    } 

    this.empty = function() { 
     this.$html.empty(); 
    } 

    this.remove = function(value) { 
     this.find(value).remove(); 
    } 

    this.clone = function() { 
     return jQuery.extend(true, {}, this); 
    } 

    this.show = function() { 
     return this.$html[0]; 
    } 
} 

function label(text) { 
    tag.call(this); 

    this.$html = $("<label></label>"); 
    this.append(text); 
} 


for(var index = 0; index < 2; index++) { 
     var fieldLabel = new label(1); 
     console.log(index); 
} 

Answer 1

ここでの問題は、あなたがあなたのtag関数内のすべてのループの実行中の変数として（varなし）indexを使用しています。そのindex変数は、最後にfor-loopの外側の範囲（これは条件>=2で停止する必要があります）で有効です。

ループの始めに、indexは0です。次のループは1でなければなりません。インナーappendメソッドに行くときしかし、それが原因ループfor-in（に渡された引数が広がり表記は1つの長さの配列を作るので、ちょうど1あり、そして0からindexセットでfor-in停止）に戻っ0にリセットされます。したがって、2番目のループの最後にはまだ0です。つまり、値1（これはfor-loopの冒頭でのみ増加します）より大きくなることはありません。条件< 2は常に満たされ、for-loopは永遠に実行されます。

for-inの実行変数に別の名前を使用することもできます。

this.append = function(...theArgs) { 
    for (var index in theArgs) { 
     this.$html.append(theArgs[index]); 
    } 
} 

またはより良い誰かが提案したようfor-ofを使用して：それとも別のローカルスコープindexこのように、varを使用してを宣言します。