用闭包留住 i

作者：vkvi 来源：ITPOW（原创）日期：2010-11-24

先看 HTML 代码：

<div id="d0">JS 闭包</div>
<div id="d1">JavaScript 闭包</div>

我们想要的效果是，循环 div，并赋 click 事件处理。点第一个 div 时，显示 0；点第二个 div 时，显示 1……

for (var i = 0; i < 2; i++)
{
    var e = document.getElementById("d" + i);
    e.onclick = function()
    {
        alert(i);
    }
}

上面的代码有个问题，因为 i 最终结果是 2，那么点每个 div 时，显示都是 2。

for (var i = 0; i < 2; i++)
{
    var e = document.getElementById("d" + i);
    var v = i;
    e.onclick = function()
    {
        alert(v);
    }
}

上面的代码也有问题，因为 v 还是在 function 之外，function 保护不了它，它还是受 for 的影响，所以 v 的值最终会变为 1，那么点每个 div 时，显示都是 1。

for (var i = 0; i < 2; i++)
{
    var e = document.getElementById("d" + i);
    function onclick(v)
    {
        e.onclick = function()
        {
            alert(v);
        }
    }
    onclick(i);
}

这回就对了，因为 onclick 放在一个 function 中，隔断了变量 i 与参数 v。或者可以简写为：

for (var i = 0; i < 2; i++)
{
    var e = document.getElementById("d" + i);
    (function onclick(v)
    {
        e.onclick = function()
        {
            alert(v);
        }
    })(i);
}

电邮：cftea@126.com