闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。很早就接触过闭包这个概念了，但是一直糊里糊涂的，没有能够弄明白JavaScript的闭包到底是什么，有什么用，今天在网上看到了一篇讲JavaScript闭包的文章(原文链接)，讲得非常好，这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了，在此写出来和大家分享一下，希望不理解JavaScript闭包的朋友们看了之后能够理解闭包！以下内容大部分是来自原文，我在原文的基础上加上一些代码注释和运行效果图以及少许的修改，方便大家理解！
要理解闭包，首先必须理解Javascript特殊的变量作用域。
在JavaScript中，变量的作用域分两种：全局变量和局部变量。
在Javascript中，在函数内部可以直接读取全局变量。
全局变量n
function f(){
alert("在
函数内部访问
全局变量n，n="+n);//在
函数内部访问
全局变量n
}
f(); //
运行结果：
但是反过来则不行，在函数外部无法读取函数内的局部变量。
函数内部定义局部变量n
}
alert("在
函数外部访问局部变量n，n="+n); //在
函数外部访问局部变量n，
错误：n未定义
运行结果：
这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，实际上是声明了一个全局变量！
函数内部没有使用var来声明，此时n就是一个
全局变量，\r\n证明：n="+n+"，window.n==n的结果是："+(window.n==n));
运行结果：
二、如何从外部读取局部变量？
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
函数内部的局部变量n
//在f
函数内部定义一个f
函数
function f(){
//在f
函数内部是可以访问局部变量n的
alert(n); //
}
}
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1 就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！或许有人会有疑问，f2是一个函数啊，怎么能够作为f1函数的返回值返回呢，其实是可以的，JavaScript中的函数名本身就是变量，所以函数也可以当作普通变量来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的返回值返回。
函数内部声明的f
函数
function f(){
alert(n);
}
return f;//将f
函数作为f
函数的返回值
}
var result=f();//f
调用完后的返回值是一个f
函数，此时result就是f
函数
result(); // 999，
调用f2
函数
运行结果：
上一节代码中的f2函数，就是闭包。各种专业文献上的"闭包"（closure）定义非常抽象，比如有这样的一个闭包定义："JavaScript闭包就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量，而这些变量是不会随上一级函数的执行完成而销毁"，对于这样的闭包定义，我是很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。
全局变量，这个变量现在指向了在f
函数内部声明的一个匿名
函数
nAdd=function(){n+=}
function f(){
alert(n);
}
return f;
}
var result=f();//result就是f
函数
result();//第一次
调用result
函数
nAdd();//nAdd代表的就是在f
函数内部声明的一个匿名
函数，nAdd()就是在
调用匿名
函数
result();//第二次
调用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），这时一定要小心，不要随便改变父函数内部变量的值。
六、思考题
如果能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。
运行结果：
运行结果：
下面给代码加上注释，分析上述两个代码片段的运行结果：
代码片段一：
分析如下：
函数以及
全局变量均
自动成为window对象的成员。
全局变量是window对象的
属性。
全局
函数是window对象的
方法。
*/
var name = "The Window";//声明一个
全局变量name，此时这个
全局变量name就
自动成为了window对象的一个
属性
//证明：
alert("window.name："+window.name);//能用window.name(对象名.
属性名)的形式去访问name，那么就证明了这个
全局变量name就
自动成为了window对象的一个
属性
//声明全局对象object，此时这个
全局变量object就
自动成为了window对象的一个
属性
var object = {
name : "My Object",//object对象的
属性name
getNameFunc : function(){//object对象的getNameFunc
函数
//object对象的getNameFunc
方法的返回值是一个匿名
函数
return function(){
//此时这个this指的是哪个对象呢，指的是window对象，哪个对象
调用this所在的
函数，this指的就是哪个对象。
//证明匿名
函数里面的this代表的是window对象而不是object
alert("this==object的结果是："+(this==object));
alert("this==window的结果是："+(this==window));
return this.name;//既然this代表的是window对象，那么this.name访问的自然就是window对象的名字"The Window"
};
}
};
//证明：全局对象object是window对象的一个
属性
alert("window.object："+window.object);
alert("window.object.name："+window.object.name);
/*
调用完getNameFunc
方法后，返回一个匿名
方法，
此时retFn代表的就是匿名
方法，现在相当于给匿名
方法起了一个名字叫retFn，
此时的retFn
函数自动成为了window对象的一个
函数
*/
var retFn = object.getNameFunc();
alert(retFn());//
调用返回的匿名
方法，那么是谁在
调用这个匿名
方法呢？是window对象
//证明：retFn
函数是window对象的一个
函数
alert("window.retFn()："+window.retFn());//能用window.retFn()(对象名.
方法名)的形式去
调用retFn
方法，那么就证明了retFn
函数是window对象的一个
函数
代码片段二：
分析如下：
全局变量name
//全局对象object
var object = {
name : "My Object", getNameFunc : function(){
/*
此时这个this代表的是哪个对象呢，this此时代表的是object对象，哪个对象
调用this所在的
函数，this指的就是哪个对象
执行完that = this后，此时that也代表object对象
*/
var that = this;//that是在getNameFunc
函数里面声明的一个局部变量
//证明getNameFunc
函数里面的this代表的是object对象而不是window
alert("this==object的结果是："+(this==object));
alert("this==window的结果是："+(this==window));
//证明that代表的是object对象
alert("that==object的结果是："+(that==object));
return function(){
/*that是在getNameFunc
函数里面声明的一个局部变量,正常情况下getNameFunc
函数调用完成后，that这个局部变量就会被JavaScript的GC回收，释放掉that这个局部变量所占用的内存空间，
但是现在that却能一直正常使用，没有被回收，
原因就在于getNameFunc是这个匿名
函数的父
函数，而getNameFunc
函数调用完后会将这个匿名
函数返回并被赋给了一个
全局变量retFn，这导致匿名
函数始终在内存中，
而匿名
函数的存在依赖于getNameFunc
函数，因此getNameFunc
函数也始终在内存中，不会在
调用结束后，被
垃圾回收机制（garbage collection）回收。
既然getNameFunc
函数始终在内存中，那么在getNameFunc
函数内部声明的that局部变量在内存中也会一直存在，既然存在，那么当然可以继续使用了。
*/
return that.name;//that代表的是object对象，那么that.name访问的自然就是object对象的名字"My Object"
};
}
};
var retFn = object.getNameFunc();//
调用完getNameFunc
方法后，返回一个匿名
方法，此时retFn代表的就是匿名
方法，现在相当于给匿名
方法起了一个名字叫retFn
alert(retFn());
最后也附上一个我以前学习JavaScript闭包时写的一个例子：
函数内部的局部变量i
//声明在A
函数的内部的子
函数b
function b(){
alert("i = "+(++i));//在子
函数b内部访问声明在A
函数内部的局部变量i
}
return b;//返回b这个
函数的地址
}
/*
在执行完var c = A()后，变量c实际上是指向了
函数b,b中用到了变量i,再执行c()后会弹出一个窗口
显示i的值(第一次为)，
这段
代码其实就是创建了一个闭包，
因为
函数a外的变量c引用了
函数a内部的
函数b
也就是说：当
函数a的内部
函数b被
函数a外的一个变量引用的时候，
就创建了一个所谓的"闭包"
闭包的作用就是在a执行完并返回后，
闭包使得JavaScript的
垃圾回收机制GC不会收回a所占用的资源，
因为a的内部
函数b的执行需要依赖a中的变量
*/
A();//此时内存中肯定会有i的空间，当执行完A()之后，GC就会回收为i分配的内存空间
var c = A();//这种
用法，GC不会把i当成
垃圾处理掉
c();//相当于
调用b()，结果是：i=
c();//结果是：i=
c();//结果是：i=
运行结果：
以上内容是小编给大家介绍的JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解的相关内容，希望对大家有所帮助！
原文链接：https://www.f2er.com/js/48263.html
