本文深入解析JavaScript闭包的核心机制，从变量作用域出发，阐述如何通过内部函数读取外部局部变量。详细讲解闭包在保持变量内存中的实际应用，分析其导致的内存消耗与潜在泄漏风险，并通过代码案例说明闭包的正确使用方式及注意事项，帮助开发者掌握这一高级特性。
JavaScript闭包概述
闭包（closure）是JavaScript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。很早就接触过闭包这个概念了，但是一直糊里糊涂的，没有能够弄明白JavaScript的闭包到底是什么，有什么用，今天在网上看到了一篇讲JavaScript闭包的文章(原文链接)，讲得非常好，这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了，在此写出来和大家分享一下，希望不理解JavaScript闭包的朋友们看了之后能够理解闭包！以下内容大部分是来自原文，我在原文的基础上加上一些代码注释和运行效果图以及少许的修改，方便大家理解！
变量作用域基础
一、变量的作用域
理解闭包的前提，是掌握JavaScript独特的变量作用域规则。
JavaScript中的变量作用域主要分为两类：全局变量与局部变量。
在JavaScript环境中，函数内部可以直接访问全局变量。
var n=;//定义全局变量n
function f(){
alert("在函数内部访问全局变量n，n="+n);//在函数内部访问全局变量n
}
f(); // 运行结果：
然而，反向操作则不可行，即函数外部无法直接读取函数内部的局部变量。
function f(){
var n=;//在f函数内部定义局部变量n
}
alert("在函数外部访问局部变量n，n="+n); //在函数外部访问局部变量n，错误：n未定义运行结果：
此处需特别注意，在函数内部声明变量时必须使用var命令。若省略该关键字，该变量将意外地成为全局变量。
function f(){
n=;
}
f();
alert("n在f1函数内部没有使用var来声明，此时n就是一个全局变量，\r\n证明：n="+n+"，window.n==n的结果是："+(window.n==n)); 运行结果：
从外部读取局部变量的方法
二、如何从外部读取局部变量？
出于特定需求，有时需要获取函数内部的局部变量。鉴于前述规则，常规手段无法实现，必须采用变通策略。
该策略的核心在于：在函数内部再定义一个内部函数。
function f(){
var n=;//f函数内部的局部变量n
//在f函数内部定义一个f函数
function f(){
//在f函数内部是可以访问局部变量n的
alert(n); //
}
}如前述代码所示，函数f2被嵌套在函数f1内部。此时，f1的所有局部变量对f2均可见；反之，f2的局部变量对f1不可见。这种结构被称为“链式作用域”（chain scope），子对象可逐级向上查找父对象的变量。因此，父对象的所有变量对子对象可见，反之不成立。既然f2能读取f1的局部变量，只需将f2作为返回值，即可在f1外部访问其内部变量。有人可能疑惑函数能否作为返回值，实际上JavaScript中函数名即为变量，函数可像普通变量一样被传递或返回。
function f(){
var n=;//局部变量n
//在f函数内部声明的f函数
function f(){
alert(n);
}
return f;//将f函数作为f函数的返回值
}
var result=f();//f调用完后的返回值是一个f函数，此时result就是f函数
result(); // 999，调用f2函数 运行结果：
闭包的定义与本质
三、闭包的概念
上一节代码中的f2函数即为闭包。专业文献对“闭包”的定义往往抽象晦涩，例如“闭包是在另一个作用域中保存了一份从上一级函数得到的变量，且这些变量不随上一级函数执行完成而销毁”。对此，更直观的理解是：闭包是能够读取其他函数内部变量的函数。由于JavaScript中只有内部子函数能读取局部变量，因此可简单将闭包定义为“定义在函数内部的函数”。本质上，闭包是连接函数内部与外部的桥梁。
闭包的核心用途
四、闭包的用途
闭包应用场景广泛，主要两大用途：一是读取函数内部的变量，二是让这些变量的值始终保留在内存中。
如何理解这一特性？请参考以下代码示例。
function f(){
var n=;
//nAdd是一个没有使用var声明的全局变量，这个变量现在指向了在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相当于一个setter，允许在函数外部操作内部的局部变量。
闭包使用的注意事项
五、使用闭包的注意点
1）由于闭包会导致函数中的变量长期驻留内存，造成较大的内存消耗，故不可滥用。否则可能引发网页性能问题，在IE浏览器中甚至可能导致内存泄漏。解决方法是在退出函数前，删除不再使用的局部变量。
2）闭包会改变父函数内部变量的值。因此，若将父函数视为对象（object），将闭包视为其公共方法（Public Method），将内部变量视为私有属性（private value），使用时需格外谨慎，避免随意修改父函数内部变量的值。
闭包运行机制案例分析
六、思考题
若能理解以下两段代码的运行结果，即表明已掌握闭包的运行机制。
代码片段一：
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); 运行结果：
代码片段二：
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); 运行结果：
以下对代码添加注释，并分析上述两个代码片段的运行结果：
代码片段一：
分析如下：
/*
在JavaScript中，我们声明的JavaScript全局对象、全局函数以及全局变量均自动成为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对象的一个函数 代码片段二：
分析如下：
var name = "The 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闭包时编写的示例：
<script type="text/javascript">
function A(){
var i = ;//声明在A函数内部的局部变量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=
</script> 运行结果：
以上内容为JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解的相关介绍，希望对大家有所帮助！