深入理解JavaScript系列阅读笔记（4）：立即调用的函数表达式-优快云博客

本文探讨了使用闭包保存状态的问题，特别是在JavaScript中处理多个元素监听器时遇到的常见陷阱。当为一系列元素设置点击事件监听器时，由于作用域问题，所有监听器可能会引用相同的变量值，导致错误的行为。文章提供了具体的代码示例来说明这一问题，并提出了一种解决方案，通过创建一个额外的匿名函数来锁定每个元素对应的正确索引。

关于原文中的用闭包保存状态

// 所以说无论点击那个连接，最终显示的都是I am link #10（如果有10个a元素的话）

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');

}

最终结果都显示为I am link #10（如果有10个a元素的话），这是作用链域的分配机制导致的。从表面上看，似乎每次点击某个连接的时候都应该返回自己的索引值。即点击位置为0的链接应该返回0，点击位置为1的链接应该返回1，以此类推。但实际上，点击每个链接都返回链接数的最大值，这是因为每个elems[i].addEventListener

他们都保存着全局的活动对象，所以他们引用的都是同一个变量i(按引用传递)。

解决方法：通过创建另一个匿名函数，强制使结果符合预期。

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        }, 'false');

    })(i);

}

这里匿名函数有一个参数lockedInIndex，也就是点击连接时最终要返回的结果值，在调用匿名函数时，我们传入了变量i,由于函数的变量是按值传递的，所以会将当前变量的值复制给lockedInIndex，所以最终我们能够得到预期的结果。

转载于:https://www.cnblogs.com/jiLeNiaoweb/archive/2013/04/05/3000447.html