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

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

<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>

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