JavaScript中let循环变量与匿名函数的绑定机制疑问

你遇到的核心差异，来自let和var在for循环中的作用域绑定规则完全不同：

为什么用var会出现“所有函数共享最终值”的问题 #

如果用var i声明循环变量，整个循环全程只有一个i变量。所有绑定的匿名点击函数都会捕获这个同一个i的引用。当循环执行完毕，i的值已经变成了循环结束的最终值（这里是2），此时点击任何按钮，函数里的i都是这个最终值，自然会指向最后一个按钮。

为什么let能让每个函数拿到正确的索引 #

当用let i声明循环变量时，JavaScript引擎会在每一次循环迭代的开始，创建一个全新的i变量，并且把当前迭代的数值赋值给这个新变量。也就是说：

• 第一次循环（i=0）：生成专属的i=0，绑定的点击函数捕获这个i
• 第二次循环（i=1）：生成另一个专属的i=1，对应的点击函数捕获这个i
• 第三次循环（i=2）：再生成一个专属的i=2，对应的点击函数捕获这个i

每个匿名函数都持有自己迭代时的独立i引用，所以点击按钮触发函数时，函数里的i就是对应按钮的索引，自然能正确指向目标按钮。

你可以做个直观验证：把代码里的let i = 0改成var i = 0，点击任何按钮都会触发最后一个按钮的逻辑，就能清晰对比出两者的差异。

内容的提问来源于stack exchange，提问作者21CenturyBoy