Coding Tutor 用三层递进式教学法，把任何技术或编…

# JavaScript闭包三层递进讲解

第一层：是什么（概念层）

闭包是指函数与其词法作用域的组合。简单说：内层函数“记住”了外层函数的变量，即使外层函数已经执行完毕。

• 本质：函数在定义时就“打包”了自己能访问的变量环境
• 类比：像你做会计时的“备查账本”——离职了，账本还能翻

```javascript

function outer() {

let count = 0;

return function inner() {

count++;

return count;

};

}

const add = outer(); // outer已执行完，但count仍被inner持有

add(); // 1

add(); // 2

```

第二层：为什么（原理层）

• 作用域链：函数查找变量时，先找自身，再往外层找，直到全局
• 变量生命周期延长：正常情况下函数执行完变量应被回收，但闭包让变量持续存活
• 注意事项：滥用闭包可能导致内存占用增加（变量无法被垃圾回收），循环中配合 let 可避免经典的 var 变量共享问题

第三层：怎么用（React实战层）

React大量依赖闭包，理解它才能少踩坑：

1. Hooks 本质就是闭包

• useState 返回的 count 和 setCount 之所以能在多次渲染间“记住”状态，靠的就是闭包持有变量

2. 经典坑：定时器中的旧闭包（stale closure）

```javascript

function Counter() {

const [count, setCount] = useState(0);

useEffect(() => {

const timer = setInterval(() => {

setCount(count + 1); // ❌ 永远读到旧的count=0

}, 1000);

return () => clearInterval(timer);

}, []); // 空依赖数组

}

```

解决方案：

• 函数式更新：setCount(c => c + 1) ✅（推荐）
• 或使用 useRef 保存最新值

3. 事件处理器中的闭包：onClick 回调捕获的是当次渲染的props/state，若需最新值，用函数式更新或ref。

学习建议

• 手写一个计数器、防抖函数（debounce）练手
• 在React中故意制造一次stale closure，再修复它，印象最深刻