在包含循环变量的循环中定义匿名函数？

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

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

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任何这些回调执行的时间.