原生JS函数工厂与闭包问题求助

嘿，这个闭包陷阱我刚入行的时候也踩过好几次！先帮你理清问题根源，再给你几个实用的解决方案。

首先纠正一个小误解：JS里其实没有严格意义上的“按引用传递”，所有参数都是按值传递的——只不过对于对象类型，传递的是内存地址的值，所以看起来像是引用。你遇到的问题核心其实是闭包捕获的是变量本身，而不是变量当时的值。当函数工厂的执行上下文弹出栈后，返回的函数依然持有对工厂内部变量的引用，如果这个变量后续被修改了，所有依赖它的闭包函数都会拿到最新的值，而不是创建时的那个值。

举个典型的错误场景（应该和你的情况类似）：

// 错误示例：循环创建函数，所有函数都拿到最后一次的变量值
function createButtonHandlers() {
  const handlers = [];
  // 用var的话，i是函数作用域的变量，所有闭包共享同一个i
  for (var i = 0; i < 3; i++) {
    handlers.push(function() {
      console.log(`点击了按钮${i}`);
    });
  }
  return handlers;
}

const buttons = createButtonHandlers();
buttons[0](); // 输出"点击了按钮3"，而不是预期的0

解决方案1：使用块级作用域变量（let/const） #

ES6引入的let和const是块级作用域的，每次循环迭代都会创建一个新的变量绑定。把上面的var换成let，问题直接解决：

function createButtonHandlers() {
  const handlers = [];
  for (let i = 0; i < 3; i++) { // 这里用let，每次迭代都是新的i
    handlers.push(function() {
      console.log(`点击了按钮${i}`);
    });
  }
  return handlers;
}

const buttons = createButtonHandlers();
buttons[0](); // 输出"点击了按钮0"，符合预期

解决方案2：用立即执行函数表达式（IIFE）创建独立作用域 #

如果需要兼容ES5环境，可以用IIFE把每次迭代的变量“固定”下来。IIFE会创建一个独立的作用域，把当前变量的值作为参数传入，闭包捕获的是这个独立作用域里的参数：

function createButtonHandlers() {
  const handlers = [];
  for (var i = 0; i < 3; i++) {
    // 用IIFE把当前的i值传递进去，形成独立作用域
    handlers.push((function(currentIndex) {
      return function() {
        console.log(`点击了按钮${currentIndex}`);
      };
    })(i));
  }
  return handlers;
}

const buttons = createButtonHandlers();
buttons[0](); // 输出"点击了按钮0"

解决方案3：让函数工厂的参数成为局部绑定 #

如果你的函数工厂是单独调用（不是循环里），那只要确保工厂函数的参数是每次调用时的独立值即可。因为函数的参数是局部变量，闭包会捕获这个局部变量的绑定：

// 正确的函数工厂示例
function createGreetingFunc(name) {
  // name是函数的局部参数，每个createGreetingFunc调用都会创建新的name绑定
  return function() {
    console.log(`你好，${name}！`);
  };
}

const greetAlice = createGreetingFunc('Alice');
const greetBob = createGreetingFunc('Bob');

greetAlice(); // 输出"你好，Alice！"
greetBob(); // 输出"你好，Bob！"

总结一下：闭包的关键是它捕获的是变量的引用，而不是快照。要解决问题，核心就是让每个返回的函数都能捕获到独立的变量实例——要么用块级作用域，要么用IIFE隔离作用域，要么确保工厂函数每次调用的参数都是独立的绑定。

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