javascript - 在包括循环变量的循环中定义匿名函数？

Question

我知道这段代码不起作用，我也知道为什么。但是，我不知道如何修复它:

JavaScript:

var $ = function(id) { return document.getElementById(id); };
document.addEventListener('DOMContentLoaded', function()
{
    for(var i = 1; i <= 3; i++)
    {
        $('a' + i).addEventListener('click', function()
        {
            console.log(i);
        });
    }
});

HTML:

<a href="#" id="a1">1</a>
<a href="#" id="a2">2</a>
<a href="#" id="a3">3</a>

我希望它打印您单击的链接的编号，而不仅仅是“4”。我宁愿避免使用节点的属性(id 或内容)，而是修复循环。

Answer 1

将循环 block 包装在它自己的匿名函数中:

document.addEventListener('DOMContentLoaded', function()
{
        for(var i = 1; i <= 3; i++)
        {
            (function(i) {
                $('a' + i).addEventListener('click', function() {
                    console.log(i);
                })
            })(i);
        }
}

这会创建一个 i 的新实例，它在每次调用/迭代时都是内部函数的本地实例。如果没有这个本地副本，每个传递给 addEventListener 的函数(在每次迭代中)都会关闭对 相同变量 的引用，其值等于 4 在任何这些回调执行时。