闭包

约 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