JavaScript闭包之for循环

之前讲了最简单的闭包，然而闭包最经典的是那个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