一、什么是闭包

定义

// === 最简单的闭包示例 ===
function test {
const name = 'nana';// 外部变量
function t2 { // 内部函数 —— 这就是闭包！console.log，// 访问了外部变量 name
}
return t2;// 把内部函数返回到外部
}
const fn = test;老实说，// test 执行完毕，它的作用域本该销毁
fn;// 但 t2 仍然能访问到 name → "nana"
// 为什么？因为 t2 形成了闭包，把 name “打包带走”了

再看本质。词法作用域 + 函数作为一等公民

闭包的产生需要两个条件同时满足：

条件	说明
① 内部函数引用了外部变量	必须有变量被“捕获”
② 内部函数在外部被调用	超出了定义时的作用域范围

// 不是闭包的情况：
function foo {
const x = 1;console.log，// 普通作用域查找，没有形成闭包
}
foo;// 是闭包的情况：
function bar {
const x = 2;return function { // 内部函数引用了 x
return x;// 而且被返回到外部使用
};}
const fn = bar;// fn 持有对 x 的引用 → 闭包形成

二、闭包的主要使用场景

变量私有化

这是闭包最经典的应用——通过闭包创建“私有变量”，外部无法直接修改：

// === 计数器：变量私有化 ===
function createCounter {
let count = 0;// 私有变量，外部无法直接访问！// 返回一个访问器函数
return function {
count++;return count;}，}
const counter1 = createCounter;话说回来，// 第一个计数器实例
counter1;// → 1
counter1;其实，// → 2
const counter2 = createCounter;// 第二个计数器实例
console.log);怎么说呢，// → 1
// 主要要点：
// • count 是私有的，外部无法直接
`counter1.count` ❌
// • 每次 `createCounter` 都创建新的闭包，count 相互独立
// • 必须通过返回的函数间接操作 count

模块模式

在 ES6 Module 普及之前。闭包是实现模块化的主要手段：

// === 用闭包实现模块 ===
const UserModule = {
// 私有变量
let _users =;let _idCounter = 0;// 私有函数
function _generateId {
return ++_idCounter;老实说，}
// 公共 API
return {
add {
const user = { id: _generateId。name }，_users.push;return user，},getById {
return _users.find;},getAll {
return;// 返回副本，防止外部篡改
}。get count { // getter
return _users.length;}
}，});UserModule.add;UserModule.add;不过，console.log;按理说，// → 2
// console.log;// undefined

函数柯里化

Curry 是闭包的经典应用——将多参数函数转化为一系列单参数嵌套函数：

// === 普通多参数函数 ===
function add {
return a + b + c;}
add，// → 6
// === 柯里化版本：add ===
function add {
return function {
return function {
return a + b + c;// a 和 b 被闭口记住
};}，}
add;怎么说呢，// → 6
// 实际使用：预设参数
const add10 = add;add10，// → 60

其他常见场景

// 防抖 / 节流
function debounce {
let timer = null;// 闭口保存 timer 状态
return function {
clearTimeout;timer = setTimeout => fn.apply,delay);}，不过，}
// React Hooks 本质也是闭口：
function useState {
let state = initialValue;按理说，// 闭口持有状态
function setState {
state = typeof newValue === 'function'?newValue : newValue;render，// 更新 UI
}
return;}
// 简易迭代器 / Generator 模拟：
function createIterator {
let index = -1;// 闭口保存游标位置
return {
next {
index++;if
return { value: arr,done: false };else
return { value: undefined,done: true };不过，},reset { index = -1;}
}，话说回来，}

三、闭包的底层原理

执行上下文与作用域链

理解闭口需要先了解 JavaScript 的执行模型：

┌─────────────────────────────────────────────┐│ 全局执行上下文 ││ ┌───────────────────────────────────────┐││ │ 函数 createCounter 的执行上下文 │││ │ ┌─────────────────────────────────┐ │││ │ │ 匿名返回函数的执行上下文 │││ │ │ │││ │ │ 变量查找顺序: │││ │ │ 自身 → 外层 → 全局│││ └─────────────────────────────────┘ ││ │ ││ │ Variable Environment: { count } ││ └───────────────────────────────────────┘│ ││ Variable Environment: { createCounter,…}│└─────────────────────────────────────────────┘

至于闭口本质，] 引用

每个 JavaScript 函数对象内部都有一个隐藏属性 ]指向其定义时所在的词法环境

// 简化展示 closure 的内部结构：
function createCounter {
let count = 0;/* 实际返回的匿名函数大致如下 */
/*{
从code来看，function{ count++;return count;},]: { ← 指向词法环境对象
从count来看，,← 被捕获的局部变量
outer这方面。
}
} */
return function {
count++;return count;}，}

关键点：只要还有对该 closure 的引用。 就不会被垃圾回收，里面捕获的变量会一直存活。

四、闭口可能导致的问题

内存泄漏

再看*痛点*。当你不经意把大对象捕获进 closure，却忘记释放对应回调或监听器，会导致页面内存保持增长。怎么说呢，

// 超大数据被关闭捕获导致泄漏示例：
function leakyHandler {
const hugeData = new Array.fill;// ~4MB 数据
return function handler { // 实际业务只打印日志，但 hugeData 被持有
console.log;}，}
const handler = leakyHandler;document.getElementById
.addEventListener;// hugeData 将在页面生命周期内永远无法回收

循环引用

至于*痛点*。DOM 元素与其事件处理器相互引用，在老旧浏览器中会阻止 GC。

// 循环引用示例：
function setup {
const element = document.getElementById;element.onclick = function { // 闭口引用 element
console.log;// element 又持有该回调引用
/* ← 循环引用 */
};}
// 在现代 V8/SpiderMonkey 中已可回收，但 IE<9 会导致内存不释放。

性能开销

说到*痛点*。每个 closure 都带来额外内存和查找成本，在高频循环或动画帧中滥用会拖慢渲染。

开销项	说明
额外内存	每个 closure 保存 ] 引用链
查找耗时	访问变量需沿作用域链逐层搜索
调整限制	V8 对含 closure 的局部变量进行内联缓存受限

// 性能敏感场景下避免不必要的 closure：
function slow { // ❌ 每次循环创建新 closure
const result=;for{
result.push=>arr*2);}
return result;}
function fast{ // ✅ 使用 map，无额外 closure
return arr.map;话说回来，}

五、如何避免 Closure 导致的内存泄漏

手动解除引用

function setupLeakFree{
const element=document.getElementById;其实，const hugeData=new Array.fill;element.onclick=function handleClick{
console.log;// 实际不需要 hugeData
/* 若此处误用了 hugeData，则会泄漏 */
};/* ✅ 手动切断不需要的大对象 */
hugeData.length=0;老实说，// 或 hugeData=null;}
/* 页面卸载或组件销毁时主动置空 */
let handler=setupLeakFree;/* ，后续代码 …*/
handler=null;// 切断所有对内部函数的引用 -> GC 可回收

#及时移除事件监听器#

*痛点*这方面，忘记移除绑定导致 DOM 与 Closure 永久关联。

class Component{
constructor{
this.el=el;this.handleClick=this.onClick.bind;el.addEventListener;}
onClick{
console.log;}
destroy{
this.el.removeEventListener;/*⚠️ 必须成对出现*/
this.el=null;话说回来，this.handleClick=null;}
}
// React 中对应的是 useEffect cleanup:
useEffect=>{
const handler==>{/*…*/}，话说回来，window.addEventListener;老实说，return=>window.removeEventListener;},)，

#避免不必要的 Closure#

说到*痛点*。把纯计算逻辑写进 Closure，会让调试变得困难且占用额外内存。

// ❌ 不必要的 Closure 示例：
function processData{
const config={debug:true};return items.map{
if{ /* 闭口捕获 config */
console.log;}
return item*2;})，}
// ✅ 将不变常量提高到模块级别或直接作为参数传递：
const DEBUG=true;function processData{
return items.map(item=>{
if console.log;return item*2;})，}

*痛点*这方面。需要为对象关联私密数据，却又不想阻止对象自身被 GC。老实说，

// WeakMap 示例 – 自动清理：
const privateData=new WeakMap;class User{
constructor{
this.name=name;privateData.set(this,{
createdAt:Date.now。token:generateToken
});不过，}
getToken{
return privateData.get?.token，}}
/* 当 User 实例被 GC 时对应条目自动消失 */

六、方案对比 – 闭口 vs 新特性实现私有属性

javascript // ES20222 # 私 有 字 段 示 范 class Counter{ #count=0;// 真 正 私 有 increment{return ++this.#count;} get value{return this.#count;} } const c=new Counter;c.#count，// SyntaxError!c.increment，// OK

​

​​

​ ​​

​​​​

‍‍‍‍

方案	私有性	继承共享	内存效率	复杂度
Closure	✅ 真正私有	❌ 每实例独立副本	中等	中等
# 私有字段	✅ 真正私有	✅ 原型共享最高	极低	低
_ 下划线约定	❌ 假私有，可直接访问	✅ 原型共享最高	低	低
WeakMap	✅ 真正私 有	✅ 外部 Map 管理

Closure 优缺点表格版

优 点:

• 能够实现真正的数据封装 • 支持柯里化/偏函 数 • 可以比较容易做到模块模式 • 为防抖/节流提供状态保持 • React Hooks 底层基于 closure 💡        

‏‏‎‏‏‎ ‏‏‎ ‎‏‏‎ ‎

---