JavaScript中内部函数使用外部参数的常见问题

嘿，这个坑我刚学JS的时候也踩过好几次！本质是闭包和变量作用域在搞鬼，咱们把问题拆明白再给出解决方案。

为什么会出现这个问题？ #

你在循环里绑定事件的时候，事件处理函数并没有立刻执行——它要等到用户触发点击才会跑。而循环里用var声明的ch是共享作用域的变量，整个循环里只有一个ch的引用。当循环结束时，ch已经指向了最后一个元素（也就是name为"Agroy"的那个），所以不管点哪个按钮，alert的都是最后这个值。

几种靠谱的解决方案 #

1. 用立即执行函数（IIFE）创建独立作用域（兼容老环境）

这是ES6之前最常用的办法，通过IIFE把当前循环的ch“快照”保存到独立作用域里：

// 假设你的原循环结构大概是这样
var characters = [{name: 'Charlie'}, {name: 'David'}, {name: 'Agroy'}];
for (var i = 0; i < characters.length; i++) {
  var ch = characters[i];
  // 立即执行函数，把当前的ch作为参数传入
  (function(currentChar) {
    // 绑定事件，这里的currentChar就是当前循环的快照
    document.getElementById('btn-' + i).addEventListener('click', function() {
      alert(currentChar.name);
    });
  })(ch);
}

每次循环都会执行这个IIFE，把当前的ch赋值给currentChar，每个事件处理函数都绑定了自己作用域里的currentChar，不会被后续循环覆盖。

2. ES6+用let声明变量（最简洁）

ES6引入的let有块级作用域，每次循环迭代都会创建一个新的ch变量绑定，直接解决问题：

var characters = [{name: 'Charlie'}, {name: 'David'}, {name: 'Agroy'}];
for (let i = 0; i < characters.length; i++) {
  let ch = characters[i];
  document.getElementById('btn-' + i).addEventListener('click', function() {
    alert(ch.name);
  });
}

甚至可以更简化，直接在循环里用characters[i]，因为let的块级作用域会自动帮我们保留每次迭代的快照。

3. 使用forEach循环

forEach的回调函数本身就有独立的作用域，每个元素迭代时都会创建新的上下文，自然能拿到当前元素的快照：

var characters = [{name: 'Charlie'}, {name: 'David'}, {name: 'Agroy'}];
characters.forEach(function(ch, index) {
  document.getElementById('btn-' + index).addEventListener('click', function() {
    alert(ch.name);
  });
});

这种写法更简洁，也避免了手动处理作用域的问题，适合数组遍历的场景。

核心总结 #

不管用哪种方法，核心都是让每个事件处理函数能访问到绑定时刻的变量独立副本，而不是共享的循环变量。如果你的环境支持ES6，优先用let；老环境就用IIFE或者forEach。

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