企业官网建设流程全解析

一、闭包是什么？

先不纠结复杂的定义，我们通过一个例子直观感受：

functioncreateCounter(){letcount=0;// 外层函数的局部变量returnfunction(){// 内层函数 count++;// 内层函数访问了外层的 count console.log(count);};}const counter=createCounter();counter();//1counter();//2counter();//3

这里，createCounter 执行完毕后，按理说它的局部变量 count 应该被销毁。但事实是，内层函数依然能“记住”并修改 count。这就是闭包的核心现象：函数能够记住并访问其词法作用域，即使该函数是在其词法作用域之外执行。

标准定义：
闭包是指一个函数与其词法环境的引用捆绑在一起形成的组合体。当内部函数引用了外部函数的变量时，就产生了闭包。

二、为什么会形成闭包？——作用域与词法环境

JS 在创建函数时，会为该函数创建一个隐藏属性 [[Environment]]，它记录了函数定义时所在的环境（作用域链）。即使函数在另一个地方被调用，它依然会先通过 [[Environment]] 找到定义时的变量。

letx='全局';functionouter(){letx='外部';returnfunctioninner(){console.log(x);// 取定义时的作用域，即 outer 内的 x};}const fn=outer();fn();// 输出'外部'

inner 定义在 outer 内部，因此其 [[Environment]] 指向 outer 的词法环境。即便在全局调用 fn，它仍然访问的是 outer 中的 x，而不是全局的 x。这就是闭包的底层原理。

三、闭包的典型应用场景

闭包绝不是八股文里的抽象概念，它在日常开发中无处不在。

1. 数据私有化与封装

JS 没有真正的私有属性，但闭包可以模拟。

functioncreateBankAccount(initialBalance){letbalance=initialBalance;return{deposit(amount){balance+=amount;returnbalance;}, withdraw(amount){if(amount<=balance){balance -=amount;returnbalance;}return'余额不足';},getBalance(){returnbalance;}};}const account=createBankAccount(1000);account.deposit(500);//1500account.withdraw(2000);//'余额不足'console.log(account.balance);// undefined —— 无法直接访问

balance 只能通过暴露的方法操作，外部完全不可见，实现了真正的私有化。

2. 函数工厂与定制化函数

利用闭包可以批量生成带有内置配置的函数。

functionmultiplyBy(factor){returnfunction(number){returnnumber * factor;};}const double=multiplyBy(2);const triple=multiplyBy(3);double(5);//10triple(5);//15

double 和 triple 各自记忆了不同的 factor，互不干扰。

3. 回调与异步中的状态保持

经典问题：如何让循环中的异步回调拿到正确的索引？

for(var i=1;i<=5;i++){setTimeout(function(){console.log(i);// 全部输出6，因为回调执行时 i 已经是6}, i *1000);}

用闭包创建独立作用域来解决（let 也有块级作用域效果）：

for(var i=1;i<=5;i++){(function(j){setTimeout(function(){console.log(j);//1,2,3,4,5}, j *1000);})(i);}

或者更简单的，使用 let 声明（每次迭代创建一个新的绑定）：

for(let i=1;i<=5;i++){setTimeout(()=>console.log(i), i *1000);//12345}

这背后依然是闭包，只不过块级作用域帮我们自动创建了多个闭包环境。

4. 模块化开发

早期的 JS 模块就是通过立即执行函数 + 闭包实现的：

const MyModule=(function(){letprivateVar='secret';functionprivateMethod(){console.log(privateVar);}return{publicMethod(){privateMethod();}};})();MyModule.publicMethod();//'secret'MyModule.privateVar;// undefined

返回的对象中的方法保持着对模块内部作用域的闭包引用，这就是模块模式的精髓。

5. 函数柯里化与偏应用

闭包能够逐步接收参数，实现参数复用。

functioncurry(fn){returnfunctioncurried(...args){if(args.length>=fn.length){returnfn.apply(this, args);}else{returnfunction(...args2){returncurried.apply(this, args.concat(args2));};}};}functionsum(a, b, c){returna + b + c;}const curriedSum=curry(sum);curriedSum(1)(2)(3);//6curriedSum(1,2)(3);//6

每一次返回的函数都通过闭包保留已经传入的参数。

四、闭包与内存管理

闭包会使外部函数的作用域无法被垃圾回收，因为内部函数一直持有引用。这既是功能需要，也可能带来内存问题。

functionheavyTask(){const largeData=new Array(1000000).fill('大数据');returnfunction(){console.log(largeData.length);// 闭包引用 largeData};}const task=heavyTask();// 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 a=fun(0);// undefined a.fun(1);//0a.fun(2);//0a.fun(3);//0var b=fun(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) 的产物，其闭包永远记住 n=0。所以之后无论调用 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 的 fun）

A.fun(1) → 内部调用 fun(1, 0) （A 的闭包 n=0）

fun(1, 0) → 打印 0

返回对象 B，其闭包记住 n = 1

第 3 链：.fun(2) （调用对象 B 的 fun）

B.fun(2) → 内部调用 fun(2, 1) （B 的闭包 n=1）

fun(2, 1) → 打印 1

返回对象 C，其闭包记住 n = 2

第 4 链：.fun(3) （调用对象 C 的 fun）

C.fun(3) → 内部调用 fun(3, 2) （C 的闭包 n=2）

fun(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]] 属性，可以清晰看到闭包引用的变量链，对排查问题极有帮助。