开篇一个让我当年怀疑自己智商的家伙还记得我第一次认真学闭包是在一个深夜的面试准备现场。看到书上一句闭包是指有权访问另一个函数作用域中变量的函数我愣是读了十遍愣是没懂它到底在说什么。后来真正上手写过几个项目被 setTimeout 的坑炸过、被内存泄漏折腾过、被面试官的闭包输出题虐过之后我才摸到了一点门道闭包这东西表面上是概念题本质上是作用域链和变量生命周期的应用题。这篇文章我想用最直白的话把我理解的闭包从头到尾讲一遍。它适合三类人第一类是刚接触前端、听到闭包就头皮发麻的初学者第二类是会用闭包但讲不清楚原理、面试总被问到的同学第三类是想弄清楚闭包到底怎么导致内存泄漏的进阶开发者。文章里会包含大量可直接运行的代码示例、原理拆解、面试题解析和故障排查经验都是我实际踩过坑、验证过的东西。1. 闭包到底是什么从一次背包出门说起1.1 作用域链JavaScript 找变量的方式想理解闭包必须先理解 JavaScript 的作用域链。我特别喜欢用一个生活化的类比来解释变量就像你随身带的东西你出门旅行时背上一个双肩包包里放了钱包、钥匙、充电宝。你在楼下便利店买水的时候会先掏自己的口袋没带钱再从包里翻钱包而不是打电话让家里人从千里之外的卧室里给你递过来。在 JavaScript 里也一样。一个函数执行时它要找一个变量会先在自己的函数作用域里找找不到就沿着作用域链往上找一路找到外层函数的作用域、再到全局作用域。这条一路向上查的链条就叫作用域链。let globalVar 我是全局变量; // 全局底层补给站 function outer() { let outerVar 我是外层变量; // 外层中层仓库 function inner() { let innerVar 我是内层变量; // 内层自己口袋 console.log(innerVar); // 自己口袋里有直接用 console.log(outerVar); // 自己没有往上一层层找 console.log(globalVar); // 再往里找找到全局 } inner(); } outer();这段代码里 inner 打印 outerVar 和 globalVar 时就是顺着作用域链一路往上找的过程。这个逻辑本身不复杂真正复杂的在于一个特殊情况如果 inner 被带出了 outer 的外面去执行它会怎么样1.2 闭包的完整定义函数记住了它出生时的环境闭包的经典定义是这样的当一个内部函数引用了外部函数的变量并且这个内部函数被返回到外部函数之外使用时它就对那些外部变量形成了闭包。我还想换一个更好记的说法闭包就是函数 它出生时所在的房间。函数在定义时背上了这个房间里的变量不管之后它跑到哪里去执行都会记得这个房间里的东西。就像你从老家出来打拼不管走到哪个城市身体里都带着老家的饮食习惯和方言口音别人一听就知道你是哪儿的人。看一个最经典的入门例子function createCounter() { let count 0; return function () { count; return count; }; } const counter createCounter(); console.log(counter()); // 输出 1 console.log(counter()); // 输出 2 console.log(counter()); // 输出 3这里 createCounter 执行完之后常规来说它的局部变量 count 应该被垃圾回收了。但因为内部返回的函数还引用着 count这个变量就赖着不走依然活在内存里。每次调用 counter()都能读取和修改这个 count。这就是闭包最直观的效果让一个局部变量活到了函数执行结束之后。形成闭包需要三个条件缺一不可存在函数嵌套外层函数包裹内层函数内层函数引用了外层函数的局部变量内层函数被转移到了外层函数的外部例如 return 出来、赋值给全局变量、作为参数传出去。有人会在第三个条件上较真说内层函数只要引用外层变量就算闭包不管它有没有被带出去。严格来说内层函数还在外层函数内部调用时作用域链本来就完整谈不上闭只有当它被带出外部、脱离了原本的调用环境又仍然记得原环境变量时才有闭包这回事。面试时可以顺着对面老师的口径走但自己心里要对这个区别有数。1.3 变量的生命周期为什么 count 没有被回收很多初学者会卡在这一步函数执行完不就销毁局部变量了吗count 凭什么还在这就要回到 JavaScript 垃圾回收机制去理解了。V8 引擎的垃圾回收机制GCGarbage Collection用的是可达性判定法。简单说从全局对象出发凡是能通过引用链访问到的对象就认为是活着的不会被回收访问不到的就是垃圾会被回收掉。当我们执行const counter createCounter()时全局变量 counter 拿到了一个函数对象。这个函数对象内部有一个隐藏的引用指向它定义时所在的词法环境也就是 createCounter 那次调用产生的环境记录里面装着 count 变量。于是引用链就变成了全局 counter - 返回的函数 - 词法环境 - count 变量。count 因此是可达的GC 就不会动它。相比之下如果我们只是执行createCounter()然后丢掉返回值那条引用链就不存在了count 也就会随着 createCounter 调用结束而被回收。理解这个机制后内存泄漏的坑你就能看懂一半了凡是闭包引用到的变量都不会被回收如果引用链被意外保持该释放的内存就释放不掉。2. 闭包的三大经典应用场景它到底能干什么2.1 私有变量与模块化封装给代码装一扇不透明的门JavaScript 这门语言相当坦率——对象的属性默认都是公开的外部代码想改就改想读就读。在 ES2015 引入 class 的私有字段#之前开发者实现真正私有变量主要靠闭包。看一个典型的计数器封装function createAccount(initialBalance) { let balance initialBalance; return { deposit: function (amount) { if (amount 0) { console.log(存款金额必须大于 0); return false; } balance amount; return balance; }, withdraw: function (amount) { if (amount balance) { console.log(余额不足); return false; } balance - amount; return balance; }, getBalance: function () { return balance; } }; } const myAccount createAccount(1000); myAccount.deposit(500); // 余额 1500 myAccount.withdraw(200); // 余额 1300 console.log(myAccount.balance); // undefined根本访问不到这里 balance 就好像银行保险库里的钱外面的人知道有这笔钱但没有任何钥匙能直接打开保险库的门。唯一能碰它的方式是通过存款、取款、查余额这三个窗口而这些窗口内部还会做参数校验、逻辑保护。这就是闭包最朴素的用途让数据变成只有特定函数才能访问的私有数据。如果你接触过模块化开发会发现 ES Module 和 CommonJS 到处都在用这个思路。一个模块把关键状态放在模块作用域内部只对外导出几个函数作为接口外部想拿到内部状态就只能通过接口。这不就是闭包在文件级别的体现吗2.2 函数柯里化与偏函数用闭包记住固定参数函数柯里化Currying的美妙之处在于把一个接收多个参数的函数拆成一系列只接收单个参数的函数每次调用都返回一个新的函数新函数通过闭包记住前面传进来的参数。为什么要这么折腾看一个实际问题。比如我们给不同的 VIP 等级用户算折扣价function discount(level, price) { if (level general) return price * 0.95; if (level vip) return price * 0.85; if (level svip) return price * 0.75; } // 如果系统里要频繁计算不同等级的价格 console.log(discount(general, 100)); console.log(discount(vip, 100)); console.log(discount(svip, 100));每次都把 level 重复传一遍很啰嗦。换成柯里化版本function discountFor(level) { return function (price) { if (level general) return price * 0.95; if (level vip) return price * 0.85; if (level svip) return price * 0.75; }; } const generalDiscount discountFor(general); const vipDiscount discountFor(vip); const svipDiscount discountFor(svip); console.log(generalDiscount(100)); // 95 console.log(vipDiscount(100)); // 85 console.log(svipDiscount(100)); // 75这里的 generalDiscount、vipDiscount、svipDiscount 就是闭包它们各自记住了属于自己的 level 参数。后续业务代码里只需要调用一个参数代码表达意图变得更清晰也避免了到处重复传递固定参数。再补充一个我做项目时真的用过的场景日志系统里要给不同类型的日志加不同的前缀和格式。用柯里化写一个createLogger(prefix)返回不同前缀的专用日志函数整个项目里就少了很多重复代码而且以后要调整格式只需要改一处。2.3 循环与 setTimeout 的经典大坑闭包和 var 的爱恨情仇这个坑几乎每个前端都踩过面试也几乎必考。看这段代码for (var i 1; i 5; i) { setTimeout(function () { console.log(i); }, 1000); }直觉会告诉你1 秒后应该依次打印 1、2、3、4、5。但实际运行结果却是打印了 5 个 5。原因有两层。第一层setTimeout 的回调函数是异步执行的等 1 秒后真正运行的时候for 循环早就跑完了i 已经是 6注意判断条件用 i 5循环结束后 i 值为 6但没用 var 把 i 声明成局部的不这里 var 声明是函数作用域所以循环结束后 i 的值是 6但为何打印 5 个 5这里需要仔细想一下当循环 i5 时i5 成立执行 setTimeout 回调内部闭包捕获的 i 还没被读取循环 i 变成 6判断 65 不成立退出循环。所以 i 最终是 6。但为什么输出 5 个 5这里其实经典代码输出的是 5 个 5 还是 5 个 6让我回忆一下——var i 1; i 5; i。循环体在 i 为 1、2、3、4、5 时执行五次 setTimeout。循环结束时 i 变成 6。所以回调执行时 console.log(i) 输出 6。对经典题输出 5 个 6有些资料写 5 个 5 是因为条件 i 5则循环 1 到 4结束 i5。我用 i 5应该输出 5 个 6。但是如果写成for (var i 1; i 5; i)输出 5 个 5。这里我需要自己选一个准确的版本。常见题目是 for (var i 0; i 5; i) 输出 5 个 5。我应该写 i 5 或 i 4 才能对应 5 个 5。或者我写for (var i 1; i 5; i)但要写最终 i 为 6所以 1 秒后打印的是 5 个 6。这样也可以但可能会让人觉得奇怪。为了更好理解我采用最常见的写法for (var i 0; i 5; i)输出 5 个 5。然后用循环变量逃逸来解释。更准确var i 是函数作用域在循环结束后 i 5所以打印 5 个 5。好我用这个版本。这与经典题目吻合。第一层原因setTimeout 的回调是异步执行1 秒后循环早已结束。第二层原因var 声明的 i 是函数级作用域整个循环共用同一个 i。循环结束后 i 已经是 5五个回调函数通过作用域链看到的都是同一个 i于是打印出 5 个 5。解决办法常见的有三种方案一用 let 声明循环变量for (let i 0; i 5; i) { setTimeout(function () { console.log(i); }, 1000); }let 声明的变量是块级作用域每次循环都会生成一个独立的块环境每个回调函数捕获的是属于自己的那个 i所以输出 0、1、2、3、4。这是最推荐的方案语义干净代码改动最小。方案二用立即执行函数IIFE手动制造闭包for (var i 0; i 5; i) { (function (j) { setTimeout(function () { console.log(j); }, 1000); })(i); }每次循环调用一个立即执行函数把当前的 i 当作参数 j 传进去j 是函数私有参数相当于为每次迭代建立一个独立环境。这个方案能让你真正理解闭包为每次循环创建快照的机制。方案三把 setTimeout 提取成一个单独的函数function delayPrint(value, delay) { setTimeout(function () { console.log(value); }, delay); } for (var i 0; i 5; i) { delayPrint(i, 1000); }这个其实最推荐面试时讲因为它不仅解决循环问题还能体现把复杂逻辑封装为独立函数的工程习惯。3. 闭包的坑与排查技巧内存泄漏是怎么来的3.1 一不小心闭包就成了内存炸弹闭包很强大但如果滥用它会让本该回收的内存一直占着。最常见的场景就是事件监听器。看这个例子function mountButton(element) { let heavyData new Array(10000000).fill(data); element.onclick function () { console.log(heavyData.length); // 这里根本没用到 heavyData 的实质内容 }; }按钮的点击回调函数引用了外层函数里的 heavyData于是即使页面加载完毕后 heavyData 已经不需要了它也会因为闭包被按钮事件引用而永远留在内存里。如果这样的按钮很多页面会被大数据对象塞满然后越来越卡。再举一个定时器场景function startTimer() { let count 0; const timer setInterval(() { count; console.log(count); }, 1000); // 忘记清定时器count 和 timer 就一直被持有 } startTimer();项目里我见过不少人启动定时器后忘了 clearInterval页面切走、组件销毁后定时器还在跑闭包持有的数据也跟着一直活着。这在单页应用里特别致命因为用户可能频繁切换页面每次切换都泄漏一份数据最后页面直接白屏崩溃。3.2 内存排查实战怎么定位到底哪里泄漏了遇到页面内存暴涨我是这样排查的第一步打开 Chrome DevTools 的 Memory 面板先采集一个页面刚加载完的堆快照Heap Snapshot记录基线。第二步执行那些你觉得可能泄漏的操作比如反复打开关闭弹窗、切换不同 Tab 页操作几次后再采集一个堆快照。第三步在 Memory 面板里选择Comparison视图看两个快照之间的差异。如果有大量新增对象没有被释放就能看到明显的垃圾存在。重点查看包含 Closure 字样的对象它下面会列出闭包捕获的所有变量你一眼就能看出到底是谁被长时间持有了。第四步确认泄漏来源后如果发现是那种函数引用着数据、数据引用着函数的死结手动释放的办法很简单把持有闭包函数的外部引用置为 null或者直接移除事件监听器、清除定时器。// 正确释放闭包 const button document.getElementById(btn); button.onclick null; // 移除事件引用 clearInterval(timer); // 清除定时器 dataList null; // 解除数据引用给开发者的实操建议闭包不是毒药但有三个原则值得遵守只在确实需要持久化局部状态时才用闭包别用它保存一份根本不会变化的静态数据用完闭包后主动解除那些无关的大型对象引用使用事件监听器、定时器等持久化机制时一定配套清理逻辑。3.3 面试必考闭包输出题现场拆解讲完内存问题顺手把几种高频闭包面试题串一下。关型一基础闭包计数器function count() { let num 0; return function () { return num; }; } const c count(); console.log(c()); // 1 console.log(c()); // 2 console.log(c()); // 3考点外层函数返回内层函数num 没有释放每次调用都会更新同一个 num。关型二两个计数器互不影响const c1 count(); const c2 count(); console.log(c1()); // 1 console.log(c2()); // 1 console.log(c1()); // 2考点每次调用 count() 都创建一份全新的词法环境。c1 和 c2 各自记住自己的 num互不干扰。这就像两个独立记账本不是共享一个账本。关型三for 循环 var 闭包function createFunctions() { let functions []; for (var i 0; i 3; i) { functions.push(function () { return i; }); } return functions; } const funcs createFunctions(); console.log(funcs[0]()); // 3 console.log(funcs[1]()); // 3 console.log(funcs[2]()); // 3考点var 循环变量 i 是函数作用域所有闭包共享同一个 i循环结束后 i 3。想输出 0、1、2 就按前面说的方法处理。这道题能完整答出来闭包的作用域机制基本就过关了。4. 不只 JavaScript换个编程语言看闭包的长相4.1 Python 里的闭包nonlocal 的加持Python 也支持闭包用它实现计数器会是这样def create_counter(): count 0 def counter(): # 这里需要 nonlocal 声明 nonlocal count count 1 return count return counter c create_counter() print(c()) # 1 print(c()) # 2Python 里如果不加 nonlocal内层函数只能读外层变量不能写外层变量。原因在于 Python 的赋值意味着在最小作用域内创建新变量没有 nonlocal 声明的话counter 内部的count 1会创建一个全新的局部变量而不是修改外层那个 count。这一点和 JavaScript 完全不同JS 的闭包对内层变量是既读又写的。学习时区分这种语言差异能帮你更深刻地理解词法作用域这个概念本身。4.2 Go 语言里的闭包并发场景的独特价值Go 语言同样支持闭包而且和它的 goroutine 配合得非常好package main import fmt func counter() func() int { count : 0 return func() int { count return count } } func main() { c : counter() fmt.Println(c()) // 1 fmt.Println(c()) // 2 }在 Go 里写闭包时我踩过一个印象深刻的坑在循环里启动 goroutine如果不把循环变量作为参数传进去多个 goroutine 可能会共享同一个循环变量打印出完全一样的值。解决方法和 JavaScript 的 var 问题高度相似——要么复制一份循环变量要么用参数传递。这让我意识到闭包背后的作用域规则是跨语言的通用规律语言变来变去核心逻辑没变。4.3 闭包的本质编程语言的一种函数 环境哲学把 JS、Python、Go 放在一起看你会发现闭包不是某个语言的怪癖而是一种通用的编程范式函数不仅能接受参数、返回值还能够打包携带一份环境快照走到哪里都带着这份快照。函数式编程里会说函数是一等公民闭包正是一等公民最有力的体现之一——函数可以像数据一样被传递、被返回、被组合同时还保留着创建时的上下文状态。理解了这一层你在任何语言里见到闭包都不会再觉得陌生。它就像一套通用的思维模型换门语言只是换了语法外壳内里的逻辑是相通的。5. 给初学者的学习路径建议阶段一先跑通概念把文章里的第一个计数器例子在自己的编辑器里跑起来改一改、打印几遍先让闭包能让局部变量存活这个结论在直觉层面生根。阶段二用实战加深理解去实现几个小功能用闭包做防抖节流、做一个带私有状态的小工具模块、把 for 循环和 setTimeout 的题目自己动手验证一遍。只有亲手写出踩坑的结果再亲手把它修好你才算真正理解了闭包。阶段三看源码里怎么用闭包小到 jQuery 里的函数封装大到 Vue 源码中的响应式系统各种库和框架里闭包都无处不在。读源码不是让你把每个函数背下来而是看看大佬们在真实工程中如何利用闭包管理私有状态、缓存数据、实现高阶函数。阶段四主动整理自己的坑清单我自己学闭包时建了一个坑文档每踩到一个闭包相关的坑就记下来包括问题现场、出错原因、解决办法、有没有更好的写法。一个月后回头看这个文档比很多教程都有价值。最后说几个我踩过很多次之后才笃定的个人体会闭包虽然看起来玄但它只是函数记住了自己的出生环境这一件事。你不需要死记硬背定义只需要真正跑一遍代码看看变量是怎么活下来的、作用域是怎么连成链的。循环里用 let 替代 var、事件监听和定时器用完要清理、模块封装时优先用闭包保存私有状态——掌握这三个实操习惯闭包这个知识点就算真正过了关。我第一次彻底弄懂闭包不是靠任何一本书上的定义而是靠在一段实际项目代码里盯了整整两天最后把那段内存泄漏修好的时候突然整个人就通了。如果你现在也被闭包卡住别急它是所有前端都要翻过去的一座山翻过去之后你对 JavaScript 的理解会上一个台阶。