什么是闭包？

MDN 对闭包（Closure）的定义如下：

闭包是函数与其创建时所在词法环境（Lexical Environment）的组合。

初次看到这句话可能会觉得有些抽象，其实可以拆解成三个关键点：

闭包一定是一个函数

函数会记住它创建时所在的作用域

即使外层函数已经执行结束，它仍然可以访问当时作用域中的变量

因此也可以简单理解为：

闭包 = 函数 + 创建时的词法环境。

这里需要特别强调一点：闭包是在函数创建时产生的，而不是调用时产生的。

理解这一点，是理解 React 中很多问题的关键。

一、先理解词法作用域（Lexical Scope）

闭包建立在词法作用域之上，因此在理解闭包之前，需要先理解什么是词法作用域。

来看一个例子：

function init() {
  const name = "Mozilla";

  function displayName() {
    console.log(name);
  }

  displayName();
}

init();

为什么 displayName() 能访问 name？

因为 JavaScript 使用的是词法作用域。

所谓词法作用域，就是：

函数能够访问哪些变量，由它定义的位置决定，而不是由调用的位置决定。

例如：

const a = 1;

function foo() {
  console.log(a);
}

function bar() {
  const a = 2;
  foo();
}

bar();

输出：

虽然 foo() 是在 bar() 中调用的，但 foo 是在全局作用域定义的，因此它访问的是全局变量 a。

可以用下面这张示意图理解：

全局作用域
│
├── a = 1
│
├── foo()   ← 在这里定义
│
└── bar()
      │
      └── a = 2

因此：

foo 不会因为调用位置不同而改变作用域

它始终只能访问自己定义时能够访问到的变量

这就是词法作用域。

二、什么是闭包？

来看 MDN 中最经典的例子：

function makeFunc() {
  const name = "Mozilla";

  function displayName() {
    console.log(name);
  }

  return displayName;
}

const myFunc = makeFunc();

myFunc();

输出：

Mozilla

很多人第一次看到这里都会疑惑：

makeFunc()

↓

已经执行结束

↓

局部变量不是应该被销毁了吗？

↓

为什么还能访问？

关键就在于：

返回出去的 displayName 仍然引用着创建它时所在的作用域。

可以理解成：

makeFunc()

┌────────────────────────┐
│ name = Mozilla         │
│                        │
│ displayName ----------┐│
└────────────────────────┘│
                          │
                          ▼
                     返回给外部

虽然 makeFunc() 已经结束执行，但 displayName 仍然引用着 name。

因此：

name

不会被垃圾回收。

这就是闭包。

三、闭包保存的是变量还是变量值？

很多人第一次学习闭包时都会误以为：

闭包会把变量复制一份。

实际上并不是。

闭包保存的是：

变量的引用（Reference）

来看一个计数器：

function createCounter() {
  let count = 0;

  return function () {
    count++;
    console.log(count);
  };
}

const counter = createCounter();

counter();
counter();
counter();

输出：

1
2
3

如果闭包保存的是值，那么每次都应该输出 1。

实际上并没有。

因为整个闭包始终引用的是同一个 count：

counter
    │
    ▼
 count

每次修改的都是同一个变量。

四、为什么局部变量不会释放？

JavaScript 的垃圾回收遵循一个简单原则：

没有任何引用的对象，就可以被释放。

例如：

function test() {
  let a = 1;
}

执行结束以后：

已经没有任何引用，因此会被垃圾回收。

但是：

function test() {
  let a = 1;

  return function () {
    console.log(a);
  };
}

变成了：

返回出去的函数
       │
       ▼
        a

因为仍然存在引用：

返回函数
   │
   ▼
变量 a

所以垃圾回收器不能释放它。

因此更准确地说：

闭包并不会阻止变量销毁，而是因为变量仍然被引用，所以不会被回收。

五、闭包有哪些典型应用？

私有变量

闭包最经典的用途之一就是实现数据封装。

function createCounter() {
  let count = 0;

  return {
    increment() {
      count++;
    },

    getCount() {
      return count;
    }
  };
}

const counter = createCounter();

counter.increment();

console.log(counter.getCount());

外部无法直接访问：

counter.count

输出：

undefined

只能通过提供的方法访问内部变量。

这也是 JavaScript 在早期实现"私有变量"最常见的方式。

函数工厂

闭包还可以用于创建拥有不同配置的函数。

function multiply(x) {
  return function (y) {
    return x * y;
  };
}

const double = multiply(2);
const triple = multiply(3);

console.log(double(5));

console.log(triple(5));

每个返回的函数都会保存自己的 x：

double
   │
   ▼
x = 2

triple
   │
   ▼
x = 3

因此它们互不影响。

事件回调

浏览器中的事件监听其实也是闭包的典型应用。

const id = 100;

button.onclick = function () {
  console.log(id);
};

事件发生时，这个函数可能已经创建了很久。

但它依然能够访问创建时作用域中的变量。

六、循环中的闭包

这是学习闭包时最经典的例子。

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  });
}

输出：

3
3
3

原因在于：

所有回调共享的是同一个 i。

setTimeout1 ─┐
setTimeout2 ─┼────► i
setTimeout3 ─┘

循环结束以后：

i = 3

因此全部输出 3。

如果改成：

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  });
}

输出：

0
1
2

因为 let 每次循环都会创建一个新的块级作用域。

第一次循环
i = 0

第二次循环
i = 1

第三次循环
i = 2

每个闭包引用的都是不同的变量。

七、React 为什么大量使用闭包？

React 可以说是建立在闭包之上的。

几乎所有 Hook、事件处理函数、自定义 Hook，都依赖闭包。

事件处理函数

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

  function handleClick() {
    console.log(count);
  }

  return (
    <button onClick={handleClick}>
      Click
    </button>
  );
}

为什么 handleClick 能访问 count？

因为它就是一个闭包。

更重要的是：

React 每次重新渲染组件，都会重新执行整个组件函数。

也就是说：

第一次渲染

App()

↓

count = 0

↓

handleClick①

点击按钮以后：

第二次渲染

App()

↓

count = 1

↓

handleClick②

可以看到：

每次渲染都会产生：

新的状态变量

新的事件函数

新的闭包

因此，每个事件函数实际上都保存着当前这次渲染的状态。

useEffect 中的闭包

来看一个经典例子：

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

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

无论点击多少次按钮，

控制台始终输出：

很多人第一次都会觉得这是 React 的问题。

其实真正的原因仍然是闭包。

整个过程可以理解成：

第一次渲染

↓

创建 Effect

↓

创建定时器

↓

定时器保存第一次 count

↓

以后一直使用第一次闭包

因为依赖数组是：

[]

React 不会重新创建这个 Effect。

所以：

闭包里面保存的始终都是第一次渲染时的变量。

为什么依赖数组能够解决问题？

例如：

useEffect(() => {
  console.log(count);
}, [count]);

当 count 发生变化以后：

React 会重新执行 Effect。

新的 Effect：

新的闭包

↓

新的 count

因此能够访问最新状态。

useCallback 本质也是闭包

const handleClick = useCallback(() => {
  console.log(count);
}, [count]);

当依赖发生变化时：

React 会重新创建这个函数。

新的函数自然拥有新的闭包。

如果依赖数组为空：

[]

那么整个组件生命周期内都会复用第一次创建的那个函数，它所引用的也始终是第一次渲染时的变量。

总结

闭包并不是 JavaScript 中一种特殊的数据结构，而是一种语言特性。

它建立在词法作用域之上，本质是：

函数与其创建时词法环境的组合。

理解闭包，可以记住下面几个核心观点：

JavaScript 使用词法作用域，函数能够访问定义位置所在作用域中的变量。

闭包是在函数创建时产生，而不是调用时产生。

闭包保存的是变量的引用，而不是变量值的拷贝。

只要变量仍然被闭包引用，就不会被垃圾回收。

React 中每一次组件渲染都会创建新的闭包，因此事件处理函数、Hook 回调实际上都对应着某一次具体渲染的状态。

理解闭包之后，再学习 useEffect、useCallback、useMemo、自定义 Hook 等内容，会更加容易理解它们背后的设计思想。

Js闭包

标签

文章助手

推荐文章

String方法总结

Js变量

Object常用方法