JavaScript闭包之for循环
<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。因为我们循环之后得到的是这样的：
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。
使用闭包解决，函数变成这样：
for(var i = 0; i < liArr .length; i++){
liArr [i].onclick = (function(arg){
return function () {
alert(arg)
}
})(i)
};就是创建一个闭包，这个闭包是一个立即执行函数，然后返回一个函数。分析一下，当我们循环的时候，为每个li赋值了一个立即执行函数，返回了一个函数，形成了一个函数作用域，这时候相当于得到
liArr [0].onclick = function () {alert(arg) }；
liArr [1].onclick = function () {alert(arg) }；
liArr [2].onclick = function () {alert(arg) }；之前我们说过，由于arg被全局函数引用，不会被GC回收，相当于内存中存放了每一个调用时候的arg值，也就是参数i的值，所以能弹出每个li对应的数。
对不是很理解的可以参考着看初识闭包的文章，你就很容易理解了。当然，对于解决这个问题还有很多方法，这边只是分析闭包的原理。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-07-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读