JavaScript 闭包介绍

文章目录一、闭包是什么二、为什么会形成闭包——作用域与词法环境三、闭包的典型应用场景1. 数据私有化与封装2. 函数工厂与定制化函数3. 回调与异步中的状态保持4. 模块化开发5. 函数柯里化与偏应用四、闭包与内存管理五、常见面试题剖析逐行分析 var a fun(0) 及后续调用第 1 步var a fun(0);第 2 步a.fun(1);第 3 步a.fun(2);第 4 步a.fun(3);三、链式调用 var b fun(0).fun(1).fun(2).fun(3);第 1 链fun(0)第 2 链.fun(1) 调用对象 A 的 fun第 3 链.fun(2) 调用对象 B 的 fun第 4 链.fun(3) 调用对象 C 的 fun运行结果六、闭包实践须知一、闭包是什么先不纠结复杂的定义我们通过一个例子直观感受functioncreateCounter(){letcount0;// 外层函数的局部变量returnfunction(){// 内层函数 count;// 内层函数访问了外层的 count console.log(count);};}const countercreateCounter();counter();//1counter();//2counter();//3这里createCounter 执行完毕后按理说它的局部变量 count 应该被销毁。但事实是内层函数依然能“记住”并修改 count。这就是闭包的核心现象函数能够记住并访问其词法作用域即使该函数是在其词法作用域之外执行。标准定义闭包是指一个函数与其词法环境的引用捆绑在一起形成的组合体。当内部函数引用了外部函数的变量时就产生了闭包。二、为什么会形成闭包——作用域与词法环境JS 在创建函数时会为该函数创建一个隐藏属性 [[Environment]]它记录了函数定义时所在的环境作用域链。即使函数在另一个地方被调用它依然会先通过 [[Environment]] 找到定义时的变量。letx全局;functionouter(){letx外部;returnfunctioninner(){console.log(x);// 取定义时的作用域即 outer 内的 x};}const fnouter();fn();// 输出外部inner 定义在 outer 内部因此其 [[Environment]] 指向 outer 的词法环境。即便在全局调用 fn它仍然访问的是 outer 中的 x而不是全局的 x。这就是闭包的底层原理。三、闭包的典型应用场景闭包绝不是八股文里的抽象概念它在日常开发中无处不在。1. 数据私有化与封装JS 没有真正的私有属性但闭包可以模拟。functioncreateBankAccount(initialBalance){letbalanceinitialBalance;return{deposit(amount){balanceamount;returnbalance;}, withdraw(amount){if(amountbalance){balance -amount;returnbalance;}return余额不足;},getBalance(){returnbalance;}};}const accountcreateBankAccount(1000);account.deposit(500);//1500account.withdraw(2000);//余额不足console.log(account.balance);// undefined —— 无法直接访问balance 只能通过暴露的方法操作外部完全不可见实现了真正的私有化。2. 函数工厂与定制化函数利用闭包可以批量生成带有内置配置的函数。functionmultiplyBy(factor){returnfunction(number){returnnumber * factor;};}const doublemultiplyBy(2);const triplemultiplyBy(3);double(5);//10triple(5);//15double 和 triple 各自记忆了不同的 factor互不干扰。3. 回调与异步中的状态保持经典问题如何让循环中的异步回调拿到正确的索引for(var i1;i5;i){setTimeout(function(){console.log(i);// 全部输出6因为回调执行时 i 已经是6}, i *1000);}用闭包创建独立作用域来解决let 也有块级作用域效果for(var i1;i5;i){(function(j){setTimeout(function(){console.log(j);//1,2,3,4,5}, j *1000);})(i);}或者更简单的使用 let 声明每次迭代创建一个新的绑定for(let i1;i5;i){setTimeout(()console.log(i), i *1000);//12345}这背后依然是闭包只不过块级作用域帮我们自动创建了多个闭包环境。4. 模块化开发早期的 JS 模块就是通过立即执行函数 闭包实现的const MyModule(function(){letprivateVarsecret;functionprivateMethod(){console.log(privateVar);}return{publicMethod(){privateMethod();}};})();MyModule.publicMethod();//secretMyModule.privateVar;// undefined返回的对象中的方法保持着对模块内部作用域的闭包引用这就是模块模式的精髓。5. 函数柯里化与偏应用闭包能够逐步接收参数实现参数复用。functioncurry(fn){returnfunctioncurried(...args){if(args.lengthfn.length){returnfn.apply(this, args);}else{returnfunction(...args2){returncurried.apply(this, args.concat(args2));};}};}functionsum(a, b, c){returna b c;}const curriedSumcurry(sum);curriedSum(1)(2)(3);//6curriedSum(1,2)(3);//6每一次返回的函数都通过闭包保留已经传入的参数。四、闭包与内存管理闭包会使外部函数的作用域无法被垃圾回收因为内部函数一直持有引用。这既是功能需要也可能带来内存问题。functionheavyTask(){const largeDatanew Array(1000000).fill(大数据);returnfunction(){console.log(largeData.length);// 闭包引用 largeData};}const taskheavyTask();// largeData 即使只用一次也驻留内存优化策略1、在不需要闭包时将引用置为 null解除对闭包作用域的引用。2、避免在闭包内引用不再使用的大对象可以用局部变量暂存后用完后将引用断开。3、尽量保持闭包的引用范围尽可能小。但请放心大多数场景下闭包的内存占用微乎其微不应因噎废食。只有在明确出现内存泄漏时才需优化。五、常见面试题剖析题目 以下代码输出什么functionfun(n, o){// 注意形参 n 和 o console.log(o);// 每次调用 fun 都会打印第二个参数 oreturn{fun: function(m){// 返回对象里的方法也叫 funreturnfun(m, n);// 调用外部的 fun传入 m 作为第一个参数闭包中的 n 作为第二个参数}};}var afun(0);// undefined a.fun(1);//0a.fun(2);//0a.fun(3);//0var bfun(0).fun(1).fun(2).fun(3);// undefined,0,1,2关键点1、fun(n, o) 会立即打印 o然后返回一个对象对象里的 fun 是一个闭包。2、闭包对象里的 fun记住了外层 fun 的第一个参数 n因为内层函数引用了 n。3、当调用对象里的 fun(m) 时它会再去调用全局的 fun(m, n)——此时 m 是新的第一个参数而闭包记住的 n 成为新的第二个参数 o。逐行分析 var a fun(0) 及后续调用第 1 步var a fun(0);调用 fun(0)此时 n 0, o undefined没传第二个参数。执行 console.log(o) → 输出 undefined。返回一个对象 { fun: function(m) { return fun(m, n); } }此时这个闭包记住的 n 0。a 持有这个返回的对象。第 2 步a.fun(1);调用 a.fun(1)即调用对象里的 fun此时 m 1。内部执行 return fun(m, n)即 fun(1, 0)因为闭包中的 n 是 0。现在调用全局的 fun(1, 0)n 1, o 0执行 console.log(o) → 输出 0返回一个新的对象里面的闭包记住的 n 1。注意a.fun(1) 的返回值是新对象但没有用变量接收所以这个新对象被丢弃。a 本身仍然指向第一次调用 fun(0) 返回的对象其闭包中的 n 依然是 0。第 3 步a.fun(2);跟第 2 步完全同理调用 a.fun(2) → 内部执行 fun(2, n)而 n 还是 a 闭包里的 0执行 fun(2, 0) → 打印 o即 0返回的新对象被丢弃。输出 0。第 4 步a.fun(3);同理再次打印 0。小结a 是 fun(0) 的产物其闭包永远记住 n0。所以之后无论调用 a.fun(x) 多少次每次都等价于调用 fun(x, 0)因此永远打印 0。三、链式调用 var b fun(0).fun(1).fun(2).fun(3);链式调用会依次使用上一次返回的新对象所以闭包中的 n 在不停更新。第 1 链fun(0)fun(0, undefined) → 打印 undefined返回对象 A其闭包记住 n 0第 2 链.fun(1) 调用对象 A 的 funA.fun(1) → 内部调用 fun(1, 0) A 的闭包 n0fun(1, 0) → 打印 0返回对象 B其闭包记住 n 1第 3 链.fun(2) 调用对象 B 的 funB.fun(2) → 内部调用 fun(2, 1) B 的闭包 n1fun(2, 1) → 打印 1返回对象 C其闭包记住 n 2第 4 链.fun(3) 调用对象 C 的 funC.fun(3) → 内部调用 fun(3, 2) C 的闭包 n2fun(3, 2) → 打印 2返回对象 D其闭包记住 n 3最终 b 接收的是对象 D但整个链式调用过程中 console.log(o) 依次输出了undefined、0、1、2。运行结果下图红圈部分六、闭包实践须知1、不要滥用闭包虽然强大但过度使用会导致逻辑难以理解且不必要地维持作用域引用。在不需要保存状态时普通函数即可。2、注意循环中的闭包陷阱善用 let 与块级作用域或者使用 forEach、Promise 等现代模式避免此类问题。3、闭包是理解 React hooks 的基础useState、useEffect 等 hooks 背后就是闭包的思路状态被函数组件“记忆”并保持引用。3、调试时利用浏览器工具在控制台打印闭包内函数展开其 [[Scopes]] 属性可以清晰看到闭包引用的变量链对排查问题极有帮助。