代码语言:javascript复制
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<script>
var liArr = document.getElementsByTagName("li");
for(var i = 0; i < liArr.length; i ){
liArr [i].onclick = function(){
alert(i);
}
};
</script>
我们预想的是点击哪个弹出哪个数,但实际上每一次弹出的i都是3。因为我们循环之后得到的是这样的:
代码语言:javascript复制liArr [0].click=function(){alert(i);};
liArr [1].click=function(){alert(i);};
liArr [2].click=function(){alert(i);};
我们都知道GC机制了,i由于被函数引用,所以i不会被回收,那么i最后存储在内存中是3,当我们点击的时候从内存中获取的就是循环完了之后的3,所以每一次弹出来的都是3。
使用闭包解决,函数变成这样:
代码语言:javascript复制for(var i = 0; i < liArr .length; i ){
liArr [i].onclick = (function(arg){
return function () {
alert(arg)
}
})(i)
};
就是创建一个闭包,这个闭包是一个立即执行函数,然后返回一个函数。分析一下,当我们循环的时候,为每个li赋值了一个立即执行函数,返回了一个函数,形成了一个函数作用域,这时候相当于得到
代码语言:javascript复制liArr [0].onclick = function () {alert(arg) };
liArr [1].onclick = function () {alert(arg) };
liArr [2].onclick = function () {alert(arg) };
之前我们说过,由于arg被全局函数引用,不会被GC回收,相当于内存中存放了每一个调用时候的arg值,也就是参数i的值,所以能弹出每个li对应的数。
对不是很理解的可以参考着看初识闭包的文章,你就很容易理解了。当然,对于解决这个问题还有很多方法,这边只是分析闭包的原理。