循环中向嵌套内部函数传递值失效问题求助

这是个很常见的异步执行 + 变量作用域坑，我来给你理清楚原因和解决方案：

问题根源 #

你遇到的问题核心在于两点：

1. var的作用域特性：var是函数级作用域，不是块级作用域。整个forEach循环里的info其实是同一个变量，每次循环都会覆盖它的值。
2. 回调的异步执行：function2里的匿名函数应该是异步触发的（比如是定时器、网络请求回调或者事件监听）。当这个回调真正执行的时候，forEach循环已经跑完了，info早就被最后一次循环的值覆盖了——这就是为什么你在回调里拿不到当前循环的info，但循环里的console.log能正常输出（因为它是同步执行的）。

解决方案 #

下面给你几种常用的解决办法，按需选择：

1. 用let替代var（最简洁的ES6方案） #

let是块级作用域，每次forEach循环都会创建一个独立的info变量，异步回调会捕获当前循环的这个变量：

function1().forEach(function (el) {
  let info = {}; // 把var改成let就行
  info.age = el
  function2('somearg', function(){
    fn3(info); // 现在能拿到当前循环的info了
  })
  console.log(info)
})

2. 用闭包创建独立作用域（兼容旧环境） #

如果你的项目还需要支持不兼容ES6的环境，可以用立即执行函数（IIFE）来给每个循环创建独立作用域，把当前的info封装进去：

function1().forEach(function (el) {
  var info = {};
  info.age = el
  // 用IIFE把当前info作为参数传入，创建独立作用域
  (function(currentInfo) {
    function2('somearg', function(){
      fn3(currentInfo);
    })
  })(info)
  console.log(info)
})

3. 绑定info到回调函数的上下文 #

可以用bind方法把info绑定到匿名回调的this上，这样回调执行时就能通过this访问到当前的info：

function1().forEach(function (el) {
  var info = {};
  info.age = el
  function2('somearg', function(){
    fn3(this); // this就是当前的info
  }.bind(info)) // 绑定info到回调的this
  console.log(info)
})

4. 直接把info作为参数传给function2（如果允许修改function2的话） #

如果function2的定义你能控制，可以让它接收额外参数，在调用回调时把info传进去：

function1().forEach(function (el) {
  var info = {};
  info.age = el
  // 把info作为第三个参数传给function2
  function2('somearg', function(currentInfo){
    fn3(currentInfo);
  }, info)
  console.log(info)
})

// 对应的function2可以这样修改：
function function2(arg, callback, extraData) {
  // 模拟异步操作，比如定时器
  setTimeout(() => {
    callback(extraData); // 调用回调时传入extraData
  }, 1000);
}

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