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

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

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

复制 1function sayHello(name) {
 2  return function() {
 3    console.log(`你好，${name}！`);
 4  };
 5}
 6
 7const greetXiaoMing = sayHello('小明');
 8greetXiaoMing(); // 输出：你好，小明！

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

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

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

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

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

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

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

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

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

复制 1function createCounter() {
 2  let count = 0; // 这是一个"私有"变量，外部无法直接访问
 3  
 4  return {
 5    increment: function() {
 6      count++;
 7      console.log(count);
 8    },
 9    decrement: function() {
10      count--;
11      console.log(count);
12    }
13  };
14}
15
16const counter = createCounter();
17counter.increment(); // 1
18counter.increment(); // 2
19counter.decrement(); // 1
20
21// 在外面根本无法直接修改 count
22// counter.count = 100;  // 无效！

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

2. 在React Hooks中无处不在

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

复制 1function MyComponent() {
 2  const [count, setCount] = useState(0);
 3  
 4  // 这里的useEffect就使用了闭包
 5  useEffect(() => {
 6    const timer = setInterval(() => {
 7      console.log(`当前计数：${count}`);
 8    }, 1000);
 9    
10    return () => clearInterval(timer);
11  }, [count]);
12  
13  return <button onClick={() => setCount(count + 1)}>点击我</button>;
14}

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

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

1. 循环中的闭包问题

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

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

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

解决方案：

复制 1// 方法1：使用let（块级作用域）
 2for (let i = 0; i < 3; i++) {
 3  setTimeout(function() {
 4    console.log(i); // 输出0,1,2
 5  }, 100);
 6}
 7
 8// 方法2：使用IIFE创建新闭包
 9for (var i = 0; i < 3; i++) {
10  (function(j) {
11    setTimeout(function() {
12      console.log(j); // 输出0,1,2
13    }, 100);
14  })(i);
15}

2. 内存泄漏问题

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

复制 1function heavyOperation() {
 2  const hugeData = getHugeData(); // 获取大量数据
 3  
 4  return function() {
 5    // 即使heavyOperation执行完毕，hugeData仍被闭包引用，无法回收！
 6    doSomethingWith(hugeData);
 7  };
 8}

解决方法：  在不需要时及时解除引用。

五、总结：闭包其实很简单

闭包不是什么神秘的黑魔法，它只是函数和其周围状态（词法环境）的组合。简单说就是：

1. 函数 + 创建时的环境 = 闭包
2. 闭包让函数能够”记住”它被创建时的环境
3. 这在很多场景下非常有用：私有变量、模块化、React Hooks等
4. 需要注意循环中的陷阱和内存管理

现在你再回头看文章开头的那个例子，是不是已经完全明白怎么回事了？

记住，你不是”学会”了闭包，而是终于知道了那个你一直在用的东西的名字而已！