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 中，闭包和状态管理、事件处理息息相关，理解它能帮助你避免状态“过期”等常见问题。
• 多练习结合实战是掌握闭包的关键。

贡献者: 鱼梦江湖, yumengjh

上一页Class

下一页DOM 上