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中，只有函数内部的子函数才能读取局部变量