无意间创建的一个闭包，以及解决办法

最新推荐文章于 2023-01-02 14:49:04 发布

RichardXu

最新推荐文章于 2023-01-02 14:49:04 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript程序开发文章标签： Javascript Closure 闭包

本文链接：https://blog.csdn.net/topasstem8/article/details/37811341

版权

JavaScript程序开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

闭包的本质是作用域链，我们在工作中经常无意间就会创建一个闭包，比如：

<input type="button" id="id1" value="1"></input>
<input type="button" id="id2" value="2"></input>
<input type="button" id="id3" value="3"></input>
<input type="button" id="id4" value="4"></input>
<input type="button" id="id5" value="5"></input>
<input type="button" id="id6" value="6"></input>
<input type="button" id="id7" value="7"></input>
<input type="button" id="id8" value="8"></input>
<input type="button" id="id9" value="9"></input>
<input type="button" id="id10" value="10"></input>
<script type="text/javascript">
for (var i = 1; i <= 10; i++)
{
   document.getElementById("id"+i).onclick = function () 
    {
        alert(i);
    }
}
</script>

运行之后，会发现每个onclick时间执行时弹出的都是11!

这是因为，onclick 函数是在全局作用域里面被定义的，被定义的时候，会生成一个对象，这个对象继承了当前执行环境的作用域链。也就是说，这个函数执行体里的 i ，引用的是全局作用域里的i。

因为 for 循环执行完以后，全局作用域下的 i 的值变为了 11，所以才会每个onclick函数都弹出11。

为了解决这个问题，我们需要为每个 onclick 函数的生成建立一个单独的作用域，然后 onclick 函数弹出这个作用域里面的局部变量：

<input type="button" id="id1" value="1"></input>
<input type="button" id="id2" value="2"></input>
<input type="button" id="id3" value="3"></input>
<input type="button" id="id4" value="4"></input>
<input type="button" id="id5" value="5"></input>
<input type="button" id="id6" value="6"></input>
<input type="button" id="id7" value="7"></input>
<input type="button" id="id8" value="8"></input>
<input type="button" id="id9" value="9"></input>
<input type="button" id="id10" value="10"></input>
<script type="text/javascript">
for (var i = 1; i <= 10; i++)
{
    (function () {
        var m;
        m = i;
        document.getElementById("id"+m).onclick = function () 
        {
            alert(m);
        }
    })();
}
</script>