如何通过for循环批量创建带正确点击参数的buttonControl实例？

你遇到的这个问题是JavaScript里非常经典的闭包陷阱，我来给你拆解一下原因和解决办法！

问题原因 #

你用for循环创建按钮时，所有的点击回调函数都共享同一个外部变量i。当循环结束后，i的值已经变成了21，所以不管点击哪个按钮，执行的都是buttonClick(21)——因为这些函数并没有捕获到循环过程中每一次的i值，而是引用了同一个变量的最终状态。

几种可行的解决方案 #

1. 用立即执行函数表达式（IIFE）捕获当前迭代值

这是ES6之前常用的解决方案，通过IIFE把每次循环的i值封装成独立的作用域变量：

button = [];
for (i = 1; i < 21; i++) {
  // 每次循环时，把当前i传入IIFE，创建独立作用域
  button[i] = new buttonControl("caption" + i, (function(currentI) {
    return function() {
      buttonClick(currentI);
    };
  })(i));
}

这里的currentI是每次循环时的i的副本，每个回调函数都会引用属于自己的currentI，不会再受外部i变化的影响。

2. 使用ES6的let声明循环变量（推荐）

如果你的运行环境支持ES6，这是最简洁的解决方案。let在for循环中会为每一次迭代创建一个独立的块级作用域变量：

button = [];
// 把无声明的i换成let
for (let i = 1; i < 21; i++) {
  button[i] = new buttonControl("caption" + i, function() {
    buttonClick(i);
  });
}

每次循环的i都是一个全新的变量，回调函数引用的是当前迭代的i，自然不会出现统一用最终值的问题。

3. 用bind方法绑定参数

利用Function.prototype.bind直接把当前的i值绑定到回调函数上：

button = [];
for (i = 1; i < 21; i++) {
  // bind会创建新函数，把i作为第一个参数传入buttonClick
  button[i] = new buttonControl("caption" + i, buttonClick.bind(null, i));
}

这种方式不需要额外的函数嵌套，代码更简洁，bind返回的函数会在调用时自动把绑定的i值传给buttonClick。

4. 改用forEach循环遍历

先创建一个包含1到20的数组，再用forEach迭代，forEach的回调参数会自动保留每一次的迭代值：

button = [];
// 生成1到20的数组
Array.from({length: 20}, (_, index) => index + 1).forEach(i => {
  button[i] = new buttonControl("caption" + i, function() {
    buttonClick(i);
  });
});

forEach的每一次迭代都有独立的作用域，所以回调函数里的i就是当前循环的对应值。

总结 #

如果你的项目环境允许使用ES6特性，优先选择let声明循环变量的方案，代码最直观简洁；如果是旧环境，IIFE或者bind都是可靠的选择。

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