JavaScript闭包之for循环

2020-04-24 17:05:29 浏览数 (1)

之前讲了最简单的闭包,然而闭包最经典的是那个for循环,几乎每一个想要理解闭包的都会遇到这个例子,每一个讲解闭包的也会举这个例子。我这次不是要讲这么解决这个for循环闭包问题,而是解释这个闭包。
代码语言: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对应的数。

对不是很理解的可以参考着看初识闭包的文章,你就很容易理解了。当然,对于解决这个问题还有很多方法,这边只是分析闭包的原理。

0 人点赞