闭包
约 1281 字大约 4 分钟
JavaScript
2025-08-08
JavaScript 的闭包（Closure）是一个既强大又容易让人迷惑的概念。掌握闭包不仅能帮助你写出更灵活、高效的代码，还能让你更好地理解现代框架（比如 React）背后的工作机制。今天，我们就从理论和实践两方面，结合 React 的实际场景，一步步带你快速精通闭包。
什么是闭包？
简单来说，闭包是函数和声明该函数的词法环境的组合。
- 词法环境（Lexical Environment）：指的是函数创建时所处的作用域，包含函数外部的变量和参数。
- 闭包的意义：函数可以访问定义时的作用域中的变量，即使函数在定义作用域外执行。
举个最简单的例子：
function outer() {
let count = 0;
function inner() {
count++;
console.log(count);
}
return inner;
}
const fn = outer();
fn(); // 输出 1
fn(); // 输出 2
fn(); // 输出 3这里，inner 函数形成了一个闭包，保留了对 outer 函数中 count 变量的引用。即使 outer 已经执行完毕，inner 仍然可以访问和修改 count。
因为count有引用所以它不会被 GC 回收，即使outer函数执行完毕，count也不会被回收，一直存在内存中。
GC 的机制就是：当一个对象没有被引用时，它会在适当的时候会被回收。
闭包的实际意义和用途
闭包能带来强大的功能，例如：
- 数据私有化 变量不会暴露在全局，避免冲突和污染。
- 函数工厂 动态创建带有特定环境的函数。
- 实现模块化 利用闭包封装状态和方法。
- 异步编程中的状态保持 保证回调函数能访问定义时的环境变量。
闭包在 React 中的重要性
React 是基于函数式组件和 Hooks 构建的，闭包是其核心机制之一。
React 状态与闭包
React 组件中的状态（useState）和事件处理函数依赖闭包捕获的状态快照。举个例子：
function Counter() {
const [count, setCount] = React.useState(0);
function handleClick() {
setCount(count + 1);
console.log("事件处理函数里的 count:", count);
}
console.log("组件渲染时 count:", count);
return <button onClick={handleClick}>点我</button>;
}每次渲染，handleClick 函数都会捕获当前的 count 变量（闭包），即“当前渲染快照”。
事件处理函数内访问到的 count 是旧状态，直到下一次渲染才更新。
这就是闭包和 React 渲染机制结合的经典表现。
异步操作中的闭包陷阱
function AsyncCounter() {
const [count, setCount] = React.useState(0);
function handleClick() {
setTimeout(() => {
console.log("异步回调里的 count:", count);
}, 1000);
setCount(count + 1);
}
console.log("组件渲染时 count:", count);
return <button onClick={handleClick}>点我</button>;
}异步回调函数中的 count 变量是定义时的旧值，和当前状态可能不同。
这是闭包导致的状态“快照”问题，需要用函数式更新或者 useEffect 解决。
闭包的内容泄露
闭包会让函数持有对外部变量的引用，即使外部函数已经执行完毕，这些变量也不会被垃圾回收（GC）——因为闭包“拦截”了它们。
如果闭包持有大量数据或者长时间不释放，可能造成内存泄露，尤其在 SPA（单页应用）中长时间运行时更明显。
把闭包里引用的变量设为 null，可以帮助垃圾回收器释放内存，因为引用断开了。
function example() {
let bigData = new Array(1000000).fill('x');
return function() {
console.log(bigData.length);
// 用完后可以清空，帮助释放内存
bigData = null;
}
}但你必须确保之后闭包不会再访问这个变量，否则会报错。
在 React 组件卸载时如何避免闭包泄露？
清理副作用：利用 useEffect 的返回函数清除定时器、取消订阅、取消网络请求。
useEffect(() => {
const timer = setTimeout(() => {
// 一些逻辑
}, 1000);
return () => clearTimeout(timer); // 组件卸载时清理
}, []);- 避免在闭包里持有大量数据或 DOM 引用，改用 refs 或状态。
- 函数式更新，减少闭包捕获的外部变量数量。
创建闭包时，最后在闭包里添加一个方法，用于手动释放闭包里引用的变量，这样就可以避免闭包的内容泄露。
function outer() {
let largeArray = new Array(1000000).fill('data');
function inner() {
console.log(largeArray.length);
}
// 使用完断开引用
inner.clear = function() {
largeArray = null;
}
return inner;
}
const fn = outer();
fn.clear(); // 手动释放 largeArray 引用实战
// 经典面试题（问：输出什么）
function testClosure() {
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 100);
}
}
testClosure(); // 打印三次 3
// 解决方案：用 let 创建块级作用域变量
function testClosureFixed() {
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 100);
}
}
testClosureFixed(); // 依次打印 0,1,2总结
- 闭包是 JavaScript 中函数访问其外部作用域变量的一种机制。
- 理解闭包可以帮你写出更安全、优雅的代码。
- 在 React 中，闭包和状态管理、事件处理息息相关，理解它能帮助你避免状态“过期”等常见问题。
- 多练习结合实战是掌握闭包的关键。