一個小例子

直接使用for迴圈
for(var i=0; i< 6; i++){
    console.log(i);
}
列印的結果為:1 2 3 4 5 6

但是結合到某一例項，或者建立相關DOM元素後

<div id="box">
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
</div>

<script type="text/javascript">
var box=$("#box").find("div");
for(var i=0;i<box.length;i++){
    box[i].on('click',function(){
            console.log(i);
})
}


</script>

列印結果為:4
 

這是因為當click被呼叫的時候，for迴圈已經結束了，此時i的值為迴圈後的最終值：4

那麼怎麼解決這個問題呢？

第一種方式：通過index，新增“正確”的索引值

for(var i=0;i<box.length;i++){
    box[i].index=i;//新增“正確”的索引值
    box[i].on('click',function(){
            console.log(i);
})
}

第二種方式：通過閉包

for(var i=0;i<box.length;i++){
   (function(){
	box[i].on('click',function(){
	console.log(i);
		})(i) //閉包
	})
	}
 

（）（i）

在javascript中，只有函式內部的子函式才能讀取區域性變數