来源

在通过《JavaScript高级程序设计》对于闭包的学习后，让我本就比较模糊的概念更加混乱，因此通过网络上查阅MDN、阮一峰关于闭包解释的日志之后，找到了最简单易懂的解释，并在此记录下来。

闭包

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

变量的作用域

想要理解闭包，就要先理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
在Javascript语言中，函数当中可以直接取到全局变量。

1
2
3
4
5
6
7
1   var n=1;
2
3   function fn1(){
4       alert(n);
5   }
6
7   fn1(); // 1

而函数外部是无法读取到函数内的局部变量。

1
2
3
4
5
1   function fn1(){
2       var n=2;
3   }
4
5   alert(n); // error

这此需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话则是声明了一个全局变量！(ES6新语法中let声明的是没有变量提升的、块级作用域的本地变量，并且可选的将其初始化为一个值，而const常量是块级范围的，类似用let语句定义的变量。但常量的值是无法（通过重新赋值）改变的，也不能被重新声明。)

1
2
3
4
5
6
7
1   function fn1(){
2       n=3;
3   }
4
5   fn1();
6
7   alert(n); // 3

如何从外部读取局部变量？

当我们有时候需要用到函数内的局部变量时，正常情况下是取不到的，因此需要取巧
那就是在函数的内部，再定义一个函数。

1
2
3
4
5
6
7
8
9
1   function fn1(){
2
3       var n=4;
4
5       function fn2(){
6           alert(n); // 4
7       }
8
9   }

在这段代码中，函数fn2就被包括在函数fn1内部，此时fn1内的局部变量对fn2可见，反之不行。
这就是Javascript语言特有的“链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

于是，我们可以通过将fn1的内部函数fn2作为返回值，即可在fn1外部读取fn1内部变量了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1   function fn1(){
2
3   var n=5;
4
5   function fn2(){
6       alert(n);
7   }
8
9   return fn2;
10
11  }
12
13  var result=fn1();
14
15  result(); // 5

上面的fn2函数，就是闭包

闭包的概念

在经过查找资料后，在我的理解当中，闭包就是能够读取其他函数内部变量的函数。
而在Javascript语言当中，只有函数内部的子函数才能读取其父级的局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途

闭包可以用在许多地方。它的最大用处有二：

可以读取函数内部的变量
让这些变量的值始终保持在内存中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1　　function fn1(){
2
3　　var n=999;
4
5　　nAdd=function(){n + = 1} // 因为没有var关键字，所以nAdd是全局变量
6
7　　function fn2(){
8　　　　alert(n);
9　　}
10
11　　return fn2;
12
13}
14
15　　var result=fn1();
16
17　　result(); // 999
18
19　　nAdd();
20
21　　result(); // 1000

在这段代码中，result实际上就是闭包fn2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数fn1中的局部变量n一直保存在内存中，而没有在fn1调用后被自动清除。
原因就在于fn1是fn2的父函数，而fn2被赋给了一个全局变量，这导致f2始终在内存中，而fn2的存在依赖于fn1，因此fn1也始终在内存中，不会在调用结束后被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是”nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。
其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除 如result=null。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

例题

如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。

代码片段一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1　　var name = "The Window";
2
3　　var object = {
4　　　　name : "My Object",
5
6　　　　getNameFunc : function(){
7　　　　　　return function(){
8　　　　　　　　return this.name;
9　　　　　　};
10
11　　　　}
12
13　　};
14
15　　alert(object.getNameFunc()());

本段代码中，执行结果是执行alert(“The Window”)
分析：第十五行中alert(object.getNameFunc()())中，当执行object.getNameFunc()时返回值为其返回的函数，而直接执行此函数时，其this指向window，因而其name值为The Window

代码片段二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1　　var name = "The Window";
2
3　　var object = {
4　　　　name : "My Object",
5
6　　　　getNameFunc : function(){
7　　　　　　var that = this;
8　　　　　　return function(){
9　　　　　　　　return that.name;
10　　　　　　};
11
12　　　　}
13
14　　};
15
16　　alert(object.getNameFunc()());

本段代码中，执行结果是执行alert(“My Object”)

分析：第十六行中alert(object.getNameFunc()())中，当执行object.getNameFunc()时返回值为其返回的函数，而直接执行此函数时，其this指向也指向window，但不同的是，此时用到的是that，而that保存的是其父级(object)的this，因此调用that.name时，其值为object的name属性即My Object