让你彻底明白什么是闭包

2025-09-10

916 字约 4 分钟

...

今天我们来聊一个听起来很高大上，但实际上你可能天天在用（只是不知道它名字）的概念——闭包。

一、一个你肯定写过的闭包

先别管定义，来看这段代码，你是不是再熟悉不过了？

function sayHello(name) {
  return function() {
    console.log(`你好，${name}！`);
  };
}

const greetXiaoMing = sayHello('小明');
greetXiaoMing(); // 输出：你好，小明！

恭喜你！这就是一个经典的闭包！是不是很简单？

二、为什么会有闭包？—— 背包的故事

想象一下，JavaScript 中的函数就像一个小机器人，当它被创建时，会背着一个神奇的背包。

这个背包里装着什么呢？装着它出生时所在环境的所有变量！

当我们调用 sayHello('小明') 时，返回的那个函数机器人背上了装有 name: '小明' 的背包。所以无论这个函数机器人之后去哪里执行，它都能从自己的背包里找到 name 这个变量。

这就是闭包的核心：函数记住了它被创建时的环境。

三、闭包在实际开发中的超级应用

1. 私有变量 - 实现自己的小秘密

在JavaScript中，没有真正的私有变量，但闭包可以帮我们实现类似的效果：

function createCounter() {
  let count = 0; // 这是一个"私有"变量，外部无法直接访问
  
  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    }
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1

// 在外面根本无法直接修改 count
// counter.count = 100;  // 无效！

这种模式就是著名的模块模式，是现代JavaScript模块化的基础。

2. 在React Hooks中无处不在

如果你用过React Hooks，那么你已经是大规模使用闭包的高手了！

function MyComponent() {
  const [count, setCount] = useState(0);
  
  // 这里的useEffect就使用了闭包
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(`当前计数：${count}`);
    }, 1000);
    
    return () => clearInterval(timer);
  }, [count]);
  
  return <button onClick={() => setCount(count + 1)}>点击我</button>;
}

useEffect 中的回调函数能够访问到 count 状态，就是因为它形成了一个闭包，把 count 打包进了自己的"背包"里！

四、小心！闭包的常见"坑"

1. 循环中的闭包问题

这是一个经典的面试题，也是实际开发中常见的坑：

// 问题代码
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出什么？不是0,1,2而是3,3,3！
  }, 100);
}

为什么？因为所有 setTimeout 回调共享同一个 i 的引用，等它们执行时，循环已经结束，i 已经变成 3 了。

解决方案：

// 方法1：使用let（块级作用域）
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出0,1,2
  }, 100);
}

// 方法2：使用IIFE创建新闭包
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 输出0,1,2
    }, 100);
  })(i);
}

2. 内存泄漏问题

由于闭包会长期持有外部变量的引用，如果不注意，可能导致内存无法被回收：

function heavyOperation() {
  const hugeData = getHugeData(); // 获取大量数据
  
  return function() {
    // 即使heavyOperation执行完毕，hugeData仍被闭包引用，无法回收！
    doSomethingWith(hugeData);
  };
}