闭包到底解决了什么问题

2024-03-18 · JavaScript · 学习笔记

“闭包”是 JavaScript 工程师绕不开的坎。面试时背诵定义容易，但真正在工程中理解其本质、副作用及应用场景，需要对 JS 的词法作用域（Lexical Scoping）和内存生命周期有深刻的认知。闭包不仅仅是语法特性，它是 JS 实现模块化、私有化和函数式编程的基石。

1. 核心原理：词法环境的持久化

从 V8 引擎的角度看，闭包并非"黑魔法"。函数在创建时，会捕获其所在的词法环境（Lexical Environment）。通常情况下，函数执行完毕后，其执行上下文（Execution Context）会被销毁，内存被回收。但如果函数内部返回了一个引用了外部变量的子函数，这个外部环境就必须被保留在堆内存中，无法释放。

这就是闭包的本质：一个函数加上它被创建时所处的词法环境的组合。 它打通了时间：让函数在未来执行时，依然能访问"过去"定义的变量。

词法作用域vs动态作用域

JavaScript 采用词法作用域（Lexical Scope），也称静态作用域。这意味着函数的作用域在定义时就确定了，而非执行时。

let name = 'global';

function outer() {
  let name = 'outer';
  function inner() {
    console.log(name);  // 'outer'
  }
  return inner;
}

let fn = outer();
let name = 'new global';
fn();  // 输出 'outer' 而非 'new global'

// inner 在定义时就绑定了 outer 函数的词法环境
// 无论在哪里调用，它看到的 name 永远是 'outer'

闭包的内存模型

在 Chrome DevTools 的 Memory Profiler 中，可以看到闭包会在 Heap Snapshot 里显示为 (closure) 标记。 V8 引擎会分析哪些外部变量被内部函数引用，只保留这些变量，而非整个作用域。这种优化被称为作用域链裁剪。

2. 经典应用场景：不只是计数器

虽然面试常考计数器，但闭包在现代开发中无处不在：

模块化模式 (Module Pattern)： 在 ES Modules 出现前，IIFE (立即执行函数) 配合闭包是实现私有变量的唯一手段。jQuery 等库通过这种方式避免全局污染。
函数柯里化 (Currying) 与偏函数： 固定部分参数，生成功能更具体的新函数。例如 redux 的中间件机制。
React Hooks： `useState` 和 `useEffect` 严重依赖闭包。Hook 的状态之所以能在多次 render 间保持，就是因为 React 内部利用闭包持有了这些状态链表。

3. 陷阱：循环与异步捕获

经典的 for 循环 setTimeout 问题，本质是 var 只有函数作用域，导致所有回调共享同一个变量 i 的引用。而 let 引入了块级作用域。在循环中，JS 引擎会为每次迭代创建一个独立的词法环境（Scope），因此每个闭包捕获的都是属于它那一轮循环的独立 i。

// ❌ 错误示例：使用 var
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：3, 3, 3（所有回调都引用同一个 i，循环结束后 i = 3）

// ✅ 方案1：使用 let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：0, 1, 2

// ✅ 方案2：使用 IIFE 创建新的作用域（ES6 之前的方案）
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 100);
  })(i);
}
// 输出：0, 1, 2

深入理解：let在循环中的特殊处理

很多人以为 let 只是"块级作用域的 var"，但在 for 循环中，let 有特殊的行为。规范要求每次循环都创建一个新的绑定（Binding），相当于：

// let 在循环中的等价行为
{
  let i = 0;
  setTimeout(() => console.log(i), 100);
}
{
  let i = 1;
  setTimeout(() => console.log(i), 100);
}
{
  let i = 2;
  setTimeout(() => console.log(i), 100);
}

4. 内存泄漏与性能考量

闭包是内存泄漏的常见源头。因为闭包会阻止垃圾回收器（GC）回收它引用的外部变量。

意外的大对象保留： 如果闭包里只需要访问 hugeObject.id，却无意中引用了整个 hugeObject，那么只要闭包存在，整个大对象都无法被回收。
DOM 节点引用： 在事件监听器形成的闭包中引用了 DOM 节点，如果节点被移除但监听器未注销，会导致 Detached DOM Nodes 内存泄漏。

优化建议： 在不需要闭包时，手动将引用置为 null；使用 WeakMap 来存储与对象关联的数据，允许键对象被回收。

内存泄漏的实战案例

// ❌ 内存泄漏示例
function setupHandler() {
  const bigData = new Array(1000000).fill('data');

  document.getElementById('button').addEventListener('click', function() {
    console.log(bigData.length);  // 闭包持有整个 bigData
  });
}

// ✅ 优化方案1：只保留必要的数据
function setupHandler() {
  const bigData = new Array(1000000).fill('data');
  const dataLength = bigData.length;  // 提取需要的值

  document.getElementById('button').addEventListener('click', function() {
    console.log(dataLength);  // 只持有一个数字，bigData 可以被回收
  });
}

// ✅ 优化方案2：使用 WeakMap
const dataCache = new WeakMap();

function setupHandler(element) {
  const bigData = new Array(1000000).fill('data');
  dataCache.set(element, bigData);

  element.addEventListener('click', function() {
    const data = dataCache.get(element);
    console.log(data?.length);
  });
}
// 当 element 被移除时，WeakMap 中的 bigData 会自动释放

Chrome DevTools 检测闭包内存

使用 Chrome DevTools 的 Memory Profiler:

打开 DevTools → Memory 标签页
选择 "Heap snapshot" 并点击 "Take snapshot"
在 Constructor 列表中搜索 "(closure)"
展开闭包项，查看 "Retained Size" (保留的内存大小)
点击闭包，在下方 "Retainers" 面板查看是谁在引用它

5. 现代视角：React Hooks 中的“闭包陷阱”

在使用 `useEffect` 时，我们常遇到“拿到的 state 是旧值”的问题（Stale Closure）。这是 because effect 函数捕获的是它创建那一刻的 state 快照。如果不将 state 加入依赖数组，闭包内的环境永远停留在过去。解决方案是正确维护 `deps` 数组，或使用 `setState(prev => ...)` 的函数式更新，绕过对当前值的直接依赖。

小结

闭包是 JavaScript 强大表达能力的来源。它允许我们实现数据隐藏、状态保持和高阶函数。但它是把双刃剑。作为高级工程师，不仅要会用闭包，更要清楚“这个闭包持有了什么？它什么时候会被释放？” 只有对内存模型心中有数，才能写出健壮且高性能的代码。