大家好，又见面了，我是你们的朋友全栈君。
之前讲了最简单的闭包，然而闭包最经典的是那个for循环，几乎每一个想要理解闭包的都会遇到这个例子，每一个讲解闭包的也会举这个例子。我这次不是要讲这么解决这个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对应的数。
对不是很理解的可以参考着看初识闭包的文章，你就很容易理解了。当然，对于解决这个问题还有很多方法，这边只是分析闭包的原理。
欢迎关注Coding个人笔记 公众号
转载于:https://juejin.im/post/5c4ed1eee51d454b0d75d768
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/107037.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
