JavaScript 闭包

摘要

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。–MDN

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。--MDN

闭包？

每当一个函数被创建时，这个函数就和创建其的词法环境绑定了。这保证了这个函数始终能访问创建其的词法环境里的数据。

例如如下代码 00：

function 张三(){     let foo = "张三的foo";     let bar = "张三的bar";     function show(){         console.log(foo,bar)     }     show(); } 张三();			// 张三的foo 张三的bar console.log(foo,bar);	// Uncaught ReferenceError: foo is not defined 

张三被调用时，创建了一个词法环境，其中包含了foo、bar和show等变量，他们仅在该词法环境和其内层词法环境中可见，而外层词法环境不可见。

当张三被执行完毕，这个词法环境里的foo和bar随即销毁，这个词法环境也不复存在。

而闭包就使得这个词法环境得以保持，并且外部/其他词法环境可以访问其中的数据。
例如如下代码 01：

let foo = "全局的foo"; let bar = "全局的bar";  function 张三(){     let foo = "张三的foo";     return function show(){      // *         console.log(foo,bar);     } } function 李四(){     let foo = "李四的foo";     let bar = "李四的bar";     let show = 张三();     show();			// 张三的foo 全局的bar } 李四();  let show = 张三(); show();			// 张三的foo 全局的bar 

┌───────────────────────┐		  ┌───────────────────────┐ │[ 张三 ] 		│		  │[ 李四 ]		  │ │			│		  │   foo: '李四的foo' 	  │ │  foo: '张三的foo'     >>>>function show>>>>  bar: '李四的bar'  	  │ │			│		  │   show: function 	  │ │			│		  │			  │ └──────────↡────────────┘		  └───────────────────────┘ 	   ↡ 	   ↳>>>>function show>>>> [ global ] 

*处的return function show将张三的词法环境“打开”，使得拥有这个返回的函数的词法环境能够访问张三的词法环境。
无论这个函数被传递到哪里，它都会持有对原始定义作用域的引用，在访问foo和bar时总会先搜索张三的词法环境，如果没有则搜索其外部词法环境直至全局词法环境，如果在任何地方都找不到这个变量，那么就会报错。
当张三被执行完毕，这个词法环境也不会立即销毁(张三自己会被销毁)，因为还有"李四和全局要访问它"，即李四和全局持有对张三的词法环境的引用show。
这个在 其他作用域 中对 原始定义时的作用域 的引用就是闭包。

关于销毁

上文说道，show能使定义它的作用域不被销毁，但不会阻止张三不被销毁
例如如下代码 02：

function 张三他爹(){     function 张三(){         let foo = "张三的foo";         return function show(){             console.log(foo);         }     }     return 张三(); } let show = 张三他爹(); show();	// 张三的foo 

张三他爹执行完后，张三不复存在，但show仍能访问定义它的作用域
或者来点更直接的，杀死张三，代码 03：

function 张三(){     let foo = "张三的foo";     return function show(){         console.log(foo);     } } let show = 张三(); 张三 = null;	//张三死了 show();		//张三的foo 

张三死了，但他的精神还在

作用域 闭包

显然，多个作用域持有的闭包指向同一个词法环境。如果某个作用域中通过闭包修改了指向的词法环境的某个数据，其它作用域也会感知到。
例如以下代码 04：

function 张三(){     let size = 10;     return [         function(n){             size += n;             console.log(size);         },         function(n){             size += n;             console.log(size);         }     ] } [enlarge1,enlarge2] = 张三(); enlarge1(2);			// 12 enlarge2(2);			// 14 

enlarge1和enlarge2同时指向了同一个词法环境，因此两次enlarge了同一个张三的size。

代码 02看起来有些怪异。
请看代码 05：

function 张三(){     let size = 10;     return function(n){         size += n;         console.log(size);     } } enlarge1 = 张三(); enlarge2 = 张三(); enlarge1(2);			// 12 enlarge2(2);			// 12 

看起来正常多了，但是结果不是我们想要的。

？

两次调用张三实际上创建了两个独立的词法环境 [张三1, 张三2]，所以两次enlarge了两个不同的张三的size。

循环

比较经典的是循环与闭包结合
例如以下代码 06：

for (var i=1; i<=5; i++) {     setTimeout( function logi() {         console.log( i );     }, i*100 ); } 

输出为5个6。
异步的setTimeout总是在当前事件(循环及其后面的同步代码)执行结束后再开始执行。每次向setTimeout传递的function都是对循环内词法环境的闭包，因此当这些function被调用时，它们访问循环内词法环境中的i，得到的是累加完毕的6。

let

如果使用现代的let而非var，结果会完全不同
例如以下代码 07：

for (let i=1; i<=5; i++) {     setTimeout( function logi() {         console.log( i );     }, i*100 ); } 

输出为1 2 3 4 5。
这个循环实际上有两个作用域

┌─────────────────────────┐ │[ ()内 ] i		  │ │   ┌──────────────────┐  │ │   │[ {}内 ] i        >>>>function logi>>>>[ global ] │   └──────────────────┘  │ │			  │ └─────────────────────────┘ 

每次迭代，JavaScript就会用上次迭代结束时i的值重新声明并初始化 {}内的 i

验证

代码 08：

for(let i=1;i<5;i++){     console.log(i); //Uncaught ReferenceError: Cannot access 'i' before initialization     let i = 1; } 

在ES6中，let声明会被提升到作用域开头但不会初始化，这就是暂时性死区。
上述代码抛出了ReferenceError: Cannot access 'i' before initialization
而不是SyntaxError: Identifier 'i' has already been declared
证明i并不在{}内作用域定义，而是属于其外层作用域。
但i确实存在在{}内作用域中

猜测：由于整个for循环的执行体中并没有使用let，但是执行中每次都产生了块级作用域，我猜想是由底层代码创建并塞给for执行体中。
-- https://www.cnblogs.com/echolun/p/10584703.html

应用

工厂函数

可以通过一个函数创建多个特定函数
例如代码 09：

function createAdder(m){     return function(n){         return m+n;     } } let addTo5 = createAdder(5); addTo5(10); 

调用createAdder会产生一个偏函数，实现功能更狭窄但更精确的函数。
如addTo5返回某数与5的和。

为什么我们通常会创建一个偏函数？
好处是我们可以创建一个具有可读性高的名字（double，triple）的独立函数。我们可以使用它，并且不必每次都提供一个参数，因为参数是被绑定了的。
另一方面，当我们有一个非常通用的函数，并希望有一个通用型更低的该函数的变体时，偏函数会非常有用。
-- https://zh.javascript.info/bind

模块/类

例如代码 0A：

let person = (function createPerson(){     let age = 1;     let name = "Li Hua";     return {         grow(){             age++         },         say(){             console.log(`I'm ${name}, and I'm ${age} years old`)         }     } })(); person.say()	// I'm Li Hua, and I'm 1 years old person.grow() person.say()	// I'm Li Hua, and I'm 2 years old 

createPerson抛出了两个方法grow和say，使其他作用域可以访问其内部的数据、方法。

性能

如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
-- MDN

使用闭包来实现一些东西不是明智的，例如代码 0A中每创建一个对象都要把方法赋给这个对象。
改为使用原型，代码 0B：

let father  = {     age: undefined,     name: undefined,     init(name){         this.age = 1;         this.name = name;     },     grow(){         this.age++;     },     say(){         console.log(`I'm ${this.name}, and I'm ${this.age} years old`)     } } let p1 = Object.create(father); p1.init("Li Hua") let p2 = Object.create(father); p2.init("Li Ming") p1.grow() p1.say()	// I'm Li Hua, and I'm 2 years old p2.say()	// I'm Li Ming, and I'm 1 years old 

或使用class来实现。
这样，方法都存在他们的原型中，免去了每次创建的赋值。

内存消耗

从理论上说，闭包会保持住其 原始定义作用域 的所有数据，因此会导致较大的内存消耗。
现代的JavaScript引擎可能会分析出一片作用域中没有使用的量，并把他们从环境中删除。
例如 代码0C：

function 张三(){     let foo = "张三的foo";     let bar = "张三的bar";     return function show(){         console.log(foo);     } } let show = 张三(); show(); 

当通过show()访问张三作用域时，bar是不存在的，因为没有使用。

测试环境：Edge 95,JavaScript: V8 9.5.91
但这个和引擎的实现有关，实际使用时应当慎重。

总结

事实上，JavaScript中到处都有闭包存在，每当函数被传递到当前词法作用域之外执行，就产生了闭包。
更确切地说，所有的函数都是闭包的，当函数被传递到当前词法作用域之外执行，闭包的效果得以表现。
学会并能够识别闭包可以减少出错，写出更健壮的代码。

在面试时，前端开发者通常会被问到“什么是闭包？”，正确的回答应该是闭包的定义，并解释清楚为什么 JavaScript 中的所有函数都是闭包的，以及可能的关于词法环境原理的技术细节。
-- https://zh.javascript.info/closure