含闭包的JavaScript For循环触发JSLint警告的技术问询

1. 你用的循环写法叫什么？ #

你写的这种在循环里用立即执行函数表达式（Immediately Invoked Function Expression，简称IIFE）包裹代码并传入循环变量i的写法，是ES6出现之前解决循环闭包作用域问题的经典方案。它没有特别花哨的专属名称，通常被称为「利用IIFE解决循环闭包陷阱」——核心是通过IIFE为每一次循环迭代创建独立作用域，把当前的i值保存下来，避免所有事件回调共享同一个i变量导致的逻辑错误。

2. 为什么JSLint/JSHint会警告「Don't make functions within a loop.」？ #

这个警告的核心原因有两点：

• 性能层面：在循环的每一次迭代里都创建新的函数对象，旧版浏览器可能会产生不必要的内存消耗与性能损耗（现代浏览器虽有优化，但工具仍会默认提醒这类潜在问题）。
• 代码维护层面：循环内嵌套函数会让代码结构变复杂，后续维护时容易混淆作用域关系，降低可读性。

3. 更优的替代方案 #

既然工具给出了警告，我们可以用更优雅的方式解决这个问题：

• 方案一：使用ES6的let声明循环变量
  这是现在最简洁的解决方案，let在for循环中会为每一次迭代创建独立的块级作用域，自动帮我们保存当前的i值，完全不需要IIFE：

  for (let i = 0; i < 10; i++) {
    // 直接在这里写绑定事件的代码即可
    document.getElementById(`btn-${i}`).onclick = function() {
      console.log(`点击了按钮${i}`);
    };
  }
  

• 方案二：把函数抽离到循环外部
  将绑定事件的逻辑封装成独立函数，循环里只调用这个函数并传入当前的i值，避免在循环内重复创建函数：

  function setupButtonClick(index) {
    const button = document.getElementById(`btn-${index}`);
    button.onclick = function() {
      console.log(`点击了按钮${index}`);
    };
  }
  
  for (var i = 0; i < 10; i++) {
    setupButtonClick(i);
  }
  

• 方案三：使用forEach遍历（适用于按钮是集合的情况）
  如果你的按钮是通过querySelectorAll获取的类数组集合，可以转换成数组后用forEach遍历，它的回调函数会自动捕获当前元素和索引，同样避免了循环内创建函数的问题：

  const buttons = Array.from(document.querySelectorAll('.btn'));
  buttons.forEach((button, index) => {
    button.onclick = function() {
      console.log(`点击了按钮${index}`);
    };
  });
  

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