推荐文章：
学习Javascript闭包（Closure）- 阮一峰
javascript深入理解-从作用域链理解闭包
1、概念
阮老师对闭包的理解总结为：闭包就是能够读取其他函数内部变量的函数。
本质上闭包就是将函数内部和函数外部连接起来的一座桥。
个人理解为：首先它是一个函数，其次可以获取其他函数作用域内的变量（定义在一个函数内部的函数）
// closure就是一个闭包函数
function func() {
var scope = 'local scope';
function closure() {
return scope;
}
return closure;
}
var result = func();
result() // 'local scope'
2、变量的作用域
理解闭包之前需要理解JavaScript的变量作用域。
变量作用域分为两种：全局作用域（global scope） 和 局部作用域（local scope） （PS：ES5新增了块级作用域）
局部作用域（函数作用域）可以访问全局作用域内的变量。
var num = 999;
function func() {
alert(num);
}
func(); // 999
而全局作用域无法访问局部作用域内的变量
function foo() {
var str = 'local scope';
}
alert(str); // error
这里有一个地方需要注意，函数内部声明变量的时候，一定要使用 var 命令。如果不用的话，你实际上声明了一个全局变量！挂载在 window 对象下，污染全局空间并影响性能。
如果我们需要在全局作用域内获取函数作用域内的变量，正常情况下是无法获取到的，此时就需要用到闭包函数了。
函数的内部，再定义一个函数。
function foo() {
var str = 'local scope';
function f1() {
return str;
}
return f1;
}
var result = foo();
result(); // 'local scope'
在以上代码中，函数 f1 被包裹在 foo 中，此时 foo 中所有的变量对 f1 而言都是可以获取到的，但是反过来就不行， foo 获取不到 f1 内的变量。
这就是JavaScript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以父对象的所有变量，对子对象都是可见的，反之则不成立。
3、闭包的作用
闭包的作用有很多，最大的作用为两个：
- 前文提到的可以读取函数内部的变量。
- 让这些变量始终保存在内存中（妥善使用内存消耗很大，在IE中可能导致内存泄）。
直接引用阮老师的示例
function f1(){
var n=999;
nAdd = function() { n += 1; }
function f2(){
alert(n);
}
return f2;
}
var result = f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
4、深入理解
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
}
data[0](); // 3
data[1](); // 3
data[2](); // 3
因为 for 循环不会创建执行上下文也就没有活动对象AO所以可以将以上代码拆解为：
var data = [];
var i = 0;
{
data[0] = function () { console.log(i); }
}
var i = 1;
{
data[1] = function () { console.log(i); }
}
var i = 2;
{
data[2] = function () { console.log(i); }
}
var i = 3;
data[0]() // 3
JavaScript 只会读取当前作用域下最后一个 i 的值，所以 data[0]() 也会打印 3。
但是如果将 var 改为 let 则 for 循环中的每个循环都是一个独立的块级作用域，代码拆解为：
var data = []
{
let i = 0;
data[0] = function () { console.log(i); }
}
{
let i = 1;
data[1] = function () { console.log(i); }
}
{
let i = 2;
data[2] = function () { console.log(i); }
}
使用立即执行函数：
var data = [];
for (var i = 0; i < 3; i++) {
(function (x) {
data[i] = function () {
console.log(x);
};
})(i)
}
data[0](); // 0
data[1](); // 1
data[2](); // 2
同理讲以上代码拆解为：
var data = [];
var i = 0;
(function (x) {
data[0] = function () { console.log(x); }
})(0);
var i = 1;
(function (x) {
data[1] = function () { console.log(x); }
})(1);
var i = 2;
(function (x) {
data[2] = function () { console.log(x); }
})(2);
var i = 3;
data[0]() // 0
请理解 Js 执行 函数方法时，变量访问的作用域为函数创建时的作用域，而非执行时的。
this指针则相反，指向的是函数执行时，而非创建时的，请理解一下代码
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
object.getNameFunc()(); // 'The Window'
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
object.getNameFunc()(); // My Object
网友评论