闭包是函数记住其创建时的词法环境,关键在于内层函数是否引用并持续访问外层变量。典型误区包括误认所有嵌套函数都是闭包、混淆闭包与语法关键字、等同闭包与内存泄漏;for循环中var声明的i在setTimeout输出5,源于函数作用域共享与变量提升;let、IIFE或setTimeout传参可解决;闭包会阻止垃圾回收被引用的变量,需及时移除监听器、避免过度捕获、必要时手动置null;Chrome DevTools的Scope面板中Closure分组可查看实际捕获的变量。

闭包不是“函数套函数”,而是“函数记住了它创建时的词法环境”
很多初学者看到 function outer() { return function inner() {} } 就说“这是闭包”,其实不准确。闭包的关键不在嵌套,而在 inner 是否访问了 outer 作用域中的变量——且该函数在 outer 执行结束后仍能访问这些变量。
典型误区:
- 以为所有内层函数都是闭包(错:没引用外层变量就不是)
- 以为闭包是某种特殊语法或关键字(错:它是 JavaScript 引擎自动产生的行为)
- 以为闭包 = 内存泄漏(错:只在变量被意外长期持有时才可能)
为什么 for 循环里用 var 声明的 i 在 setTimeout 中总是输出 5?
这是初学者最常撞墙的问题,本质是闭包 + 变量提升 + 作用域共享导致的。
for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 100);
}
// 输出:5 5 5 5 5
原因:var 声明的 i 是函数作用域,整个循环共用一个 i;等所有 setTimeout 执行时,循环早已结束,i 已变成 5。
立即学习“Java免费学习笔记(深入)”;
解决办法(任选其一):
- 用
let替代var(块级作用域,每次迭代生成独立绑定) - 用立即执行函数包裹:
(function(i) { setTimeout(() => console.log(i), 100); })(i) - 用
setTimeout的第三个参数传参:setTimeout(console.log, 100, i)
闭包会阻止垃圾回收吗?什么时候该主动释放?
会,但仅限于被闭包持续引用的变量。JavaScript 引擎无法回收仍被活跃函数“记住”的外层变量。
常见风险场景:
- 事件监听器中闭包持有了大对象(如 DOM 节点、大型数组),且监听器未被移除
- 缓存函数反复生成新闭包,但旧闭包引用未断开(比如没清理
Map或WeakMap) - 单例模块中用闭包缓存私有状态,但状态本身不再需要却未置空
安全做法:
- 监听器用完及时调用
removeEventListener - 避免在闭包中直接引用整个 DOM 节点树,改用 ID 或轻量属性
- 必要时手动将闭包内引用设为
null(如self._cache = null)
如何调试一个闭包?Chrome DevTools 里怎么看它捕获了哪些变量?
在断点处打开 “Scope” 面板,就能看到 “Closure” 分组——里面列出的就是当前函数闭包所持有的变量及其值。
注意几个细节:
- 只有真正被引用的变量才会出现在 Closure 下(未使用的不会被捕获)
- 如果看到
Closure (0 variables),说明这个函数 technically 不是闭包(即使嵌套了) - 变量名显示为灰色,表示它来自外层作用域;点击可跳转到声明位置
- 若 Closure 里出现意外的大对象(如
document、hugeArray),就要检查是否过度捕获
闭包本身没有魔法,它只是 JavaScript 作用域规则的自然结果。真正容易被忽略的,是那些看似无害的变量引用,会在你没注意时悄悄拖慢性能、撑大内存。











