for循環裏的的相關索引值/閉包

一個小例子

直接使用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中，只有函數內部的子函數才能讀取局部變量