为什么循环里绑定的事件，执行时总会出错

在循环中为元素绑定事件，执行时之所以总会出错或不符合预期（例如，无论点击哪个按钮，都只响应最后一个值的逻辑），其根本原因在于**“循环”的同步执行与“事件回调”的异步执行之间，存在着一个至关重要的“时间差”**。这个问题的产生，主要涉及五个核心环节：源于“循环”的同步执行与“事件回调”的异步执行之间的“时间差”、循环变量在“函数作用域”内被“共享”而非“独立”、事件回调函数通过“闭包”捕获了循环变量的“最终值”、未能为每一次循环，创建“独立”的变量作用域、以及对var与let关键字在循环中作用域行为的混淆。

其中，事件回调函数通过“闭包”捕获了循环变量的“最终值”，是这一经典问题的直接技术原因。具体来说，for循环本身，会在主线程上，以极快的速度（通常是几毫秒内）瞬间完成。而我们在循环内部，所“绑定”的那些事件处理函数，在这一刻，仅仅是被“创建”和“注册”了，它们并不会立即执行。它们会静静地等待，直到未来的某个时刻，用户真正地触发了那个事件（例如，一次点击）。当回调函数最终被触发执行时，它会回头，去寻找并使用那个循环变量。然而，此时，外层的for循环，早已执行完毕，循环变量，也早已，停留在了其“最终的”那个值上。

一、问题的“犯罪现场”重现

要深入地理解这个问题的本质，让我们首先，通过一段非常经典的JavaScript代码，来重现一次“犯罪现场”。

1. 场景设置

假设，我们在一个网页上，有三个按钮。我们希望，通过一个for循环，为这三个按钮，分别绑定一个点击事件。点击第一个按钮时，弹出提示“你点击了按钮0”；点击第二个，弹出“你点击了按钮1”；以此类推。

2. 一个经典的、错误的代码实现

HTML

<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>

JavaScript

var buttons = document.getElementsByTagName('button');

for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
        alert('你点击了按钮' + i);
    };
}

3. “诡异”的现象

当我们，在浏览器中，运行这段代码后，我们会发现一个极其“诡异”的、完全不符合我们直觉的现象：

点击“按钮0”，弹出的提示是：“你点击了按钮3”

点击“按钮1”，弹出的提示是：“你点击了按钮3”

点击“按钮2”，弹出的提示是：“你点击了按钮3”

无论我们点击哪个按钮，最终得到的，都是循环变量i的“最终值”3。这，就是那个困扰了无数JavaScript初学者的、经典的“循环绑定事件”陷阱。

二、根本原因：执行“时机”的“异步”之谜

要解开这个谜题，我们必须，在脑中，将整个过程，分解为两个在“时间”上，完全分离的阶段：“绑定”阶段和**“执行”阶段**。

1. “绑定”阶段：同步的、瞬间的

for循环本身，是一段“同步”代码。当浏览器，加载并执行这段JavaScript代码时，这个for循环，会在主线程上，以极快的、通常是微秒或毫秒级的速度，“瞬间”，就执行完毕。

在这个“瞬间”里，程序，依次地，完成了以下工作：

i=0时：为buttons[0]，绑定了一个“点击后，就去执行一个匿名函数”的事件。

i=1时：为buttons[1]，绑定了一个类似的事件。

i=2时：为buttons[2]，绑定了一个类似的事件。

当i增加到3时，3 < 3的条件不再满足，for循环，彻底结束。此时，变量i的最终值，就是3。

需要注意的是，在这个阶段，那三个被我们定义的、匿名的onclick回调函数，仅仅是，被“创建”和“注册”到了相应的按钮上。它们内部的代码（即alert(...)），一行都还没有被执行。

2. “执行”阶段：异步的、未来的

在for循环结束了很久之后（可能是几秒，也可能是几分钟），用户，终于，将鼠标，移动到了“按钮1”之上，并进行了“点击”。 此时，浏览器，捕获到了这个“点击”事件，于是，它从“事件队列”中，取出了我们在“绑定”阶段，为“按钮1”所注册的那个回调函数，并开始“执行”它。

3. “共享”的循环变量

问题的关键，就在于，当我们使用var关键字，来声明循环变量i时，根据JavaScript的作用域规则，这个变量i的作用域，是整个外部的、全局的（或函数级的）作用域。 这意味着，在我们的“绑定”阶段，那三次循环，所创建出来的三个不同的回调函数，它们在内部，所引用的，都是同一个、共享的、位于它们外部作用域的、那个唯一的变量i。

三、核心机制：闭包的“记忆”

现在，让我们来连接“执行”与“共享”这两个关键点，看看“闭包”，是如何，在其中，扮演“魔鬼”角色的。

1. 什么是闭包？

在JavaScript中，一个函数，会“记住”并能够持续地访问其被定义时所在的那个“词法作用域”中的变量，即便它在那个作用域之外被执行。这种现象，被称为“闭包”。

2. “寻宝游戏”再现

当我们在未来的某个时刻，点击了“按钮1”，其对应的回调函数，开始执行时，它遇到了alert('你点击了按钮' + i);这行代码。此时，它需要知道，变量i的值，到底是什么。于是，它开始了一场“寻宝游戏”：

首先，它在自己的函数作用域内部，寻找变量i的声明。结果，没找到。

于是，它沿着“作用域链”，向其“出生地”（即外部的for循环所在的作用域）走去，继续寻找。这一次，它找到了！它找到了那个被所有三个回调函数所“共享”的、唯一的变量i。

然后，它“读取”了这个变量i，在“当前”这个时间点的值。

因为，我们知道，for循环，早已在数秒或数分钟前，就已经执行完毕，i的最终值，早已停留在了3。

因此，这个回调函数，最终，读取到的i的值，就是3。

无论你点击哪个按钮，其对应的回调函数，所经历的，都是完全相同的“寻宝”过程，它们最终，找到的，也都是那个唯一的、值已变为3的变量i。

四、传统解决方案：“闭包”的“手动”应用

在现代的let关键字出现之前，要解决这个经典的问题，开发者们，必须“手动地”，为每一次循环，都创建一个“独立”的、“封闭”的作用域，来将循环变量i在“当前”这一刻的值，“复制”并“冻结”一份。

实现这一目标，最经典的技巧，就是使用“立即执行的函数表达式”。

修正后的代码（传统方案）：JavaScriptfor (var i = 0; i < buttons.length; i++) { (function(saved_i) { // 这是一个“立即执行的函数表达式” buttons[i].onclick = function() { alert('你点击了按钮' + saved_i); }; })(i); // 在定义的同时，就立即执行它，并将当前的i的值，作为参数传进去 }

执行过程分析：

在for循环的每一次迭代中，我们都创建了一个新的、临时的、匿名的函数。

并且，我们立即，就执行了它。

在执行时，我们将当前循环中i的值（第一次是0，第二次是1…），作为参数，传递给了这个临时函数。

在这个临时函数的内部，我们创建了一个新的、局部的变量saved_i，来接收这个被传入的值。

最终，我们所绑定的那个onclick回调函数，它所“闭包”捕获的，就不再是那个外部的、共享的、会变化的i了，而是这个内部的、独立的、在它诞生那一刻，值就已经被“固定”下来的saved_i。

通过这种方式，我们巧妙地，为每一次循环，都创造了一个独立的“快照”作用域。

五、现代解决方案：“块级作用域”的“优雅”

虽然上述的“立即执行函数”方案，能够有效地解决问题，但其写法，无疑是“复杂”和“反直觉”的。幸运的是，现代JavaScript（从ES6开始），为我们提供了一个极其简单、极其优雅的“终极”解决方案——let关键字。

1. let关键字的“块级作用域”

与var的“函数作用域”不同，let（和const）声明的变量，其作用域，是“块级”的。一个“块”，就是由一对花括号{}所包裹的任何区域。

2. 循环中的“特殊行为”

更重要的是，当let，被用在for循环的头部时，它，具有一种特殊的、专门为了解决我们这个问题而设计的“幕后”行为。

• 它，会在每一次的循环迭代中，都为循环变量i，创建一个全新的、独立的、只属于本次迭代的“词法绑定”。
• 这种行为，在效果上，就等同于，JavaScript引擎，在每一次循环的开始，都为我们，自动地，在幕后，创建了一个类似于“立即执行函数”的、独立的“小房间”。

3. 最终的、简洁的代码

JavaScript

// 唯一的改动，就是将 var 替换为 let
for (let i = 0; i < buttons.length; i++) { 
    buttons[i].onclick = function() {
        alert('你点击了按钮' + i); // 此处的i，是本次迭代专属的那个“独立”的i
    };
}

这段代码，不仅看起来，与我们最初的、符合直觉的写法，几乎完全一样，而且，它的运行结果，也完全符合我们的预期。在现代的JavaScript编程中，在任何for循环中，都应无条件地，优先使用let，而非var。

常见问答 (FAQ)

Q1: 这个问题，只在JavaScript中存在吗？

A1: 是的，这个经典的、由“变量提升”、“函数作用域”和“异步回调”共同作用而产生的陷阱，是JavaScript语言，所特有的。在像Java或C#这类，具有“块级作用域”，且事件绑定机制不同的语言中，通常，不会出现完全相同的问题。

Q2: var和let在循环中的根本区别是什么？

A2: 使用var时，整个循环，自始至终，都只有一个循环变量i的实例。而使用let时，每一次的循环迭代，都会创建一个全新的、独立的i的实例。

Q3: 什么是“闭包”？

A3: “闭包”，是指一个函数，能够“记住”并持续访问其被定义时所在的、那个“词法作用域”中的变量，即便它在那个作用域之外被执行。它是“词法作用域”规则，所自然产生的一种强大的语言特性。

Q4: 除了使用let，还有其他现代的方法来解决这个问题吗？

A4: 有。例如，可以使用数组的forEach方法，并利用其回调函数的参数。但for...of循环（如果适用）和直接使用let的for循环，通常被认为是，最清晰、最符合现代编程习惯的解决方案。