理解闭包（一）

最新推荐文章于 2021-06-03 09:54:25 发布

胡鹤婷

最新推荐文章于 2021-06-03 09:54:25 发布

阅读量196

点赞数

分类专栏： js 文章标签：闭包

js 专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了JavaScript中的闭包概念，包括变量作用域、作用域链的创建过程、闭包的定义及其用途，并通过实例展示了闭包如何使函数内部变量在外部可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为一个新手，学习闭包还是有点小激动，感觉语言真的很有魅力，前提是我要学会它
依然参考了阮一峰的博客学习的

阮一峰博客原文：学习Javascript闭包（Closure）

学习变量的作用域和作用域链对于学习真的有很大的帮助，在学习闭包之前听了大神的建议，把这一块好好的学习了一下，再闭包，真的觉得变得比之前好理解的多

（一）：变量作用域

变量的作用域分为全局变量和局部变量
JS可以在函数内部直接访问全局变量

var a = 1;
function f1(){
    console.log(a);
}
f1();// 1

在函数外部无法访问到函数内部的变量

function f1(){
  var a = 1;
}
console.log(a);//error

函数内部申明变量时，如果不使用var 命令，实际上声明了一个全局变量

function f1(){
    a = 1;//实际定义了一个全局变量，在函数外部也可以访问到
}
console.log(a);//1

（二）如何实现从函数外部读取到函数内部定义的局部变量？

常见的方式就是在函数内部创建另一个函数
例如：

function f1(){
var a = 1;
function f2(){
   console.log(a);// 1
}
}

在上面的代码中，函数f2被包括在函数f1的内部，这时f1内部的所有局部变量对于函数f2来说都是可以访问到的。但是放过来，f2函数内定义的局部变量对函数f1来说，是不可见的。这是JavaScript语言中特有“作用域链”结构所导致的，子对象会一级一级向上寻找所有父对象的变量。所以父对象的所有变量对于子对象来说都是可见的。
那么，此时，我们只要把f2作为返回值，我们就可以利用f2函数充当桥梁在f1函数外部访问到函数f1内部的局部变量。

（三）认识作用域链

上文提到JavaScript中特有的“作用域链”，那么JS中这个特有的“作用域链”究竟是如何创建的呢？
当某个函数被调用的时候会创建一个执行环境以及相应的作用域链，然后用arguments和其他命名参数值来初始化函数的活动对象，对于作用域链而言，其前端始终都是当前代码所在的环境的变量对象（每个函数调用时都会产生一条作用域链，那么其最前端也就是当前执行的函数的执行环境保存的变量对象），外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位…直到作为作用域链终点的全局执行环境。

用下面这里例子具体说明函数作用域链的创建过程：

function compare(value1,value2){
  if(value1<value2){
       return -1;
   }
    if(value1>value2){
       return 1;
   }else{
       return 0;
   }
}
var result = compare(5,10);

在创建compare函数时，会创建一个预先包含全局变量对象的作用域链，这个作用域链保存在内部的[[Scope]]属性中。当调用compare函数时，会为函数创建一个函数执行环境，然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。此后，又有一个活动对象（在此作为变量对象使用）被创建并被推入执行环境作用域的前端。对于compare这个函数而言，其作用域链中包含两个变量对象：本地活动对象和全局变量对象。作用域链本质上是一个指向变量对象的指针列表，它只引用不实际包含变量对象
在函数中访问一个变量的时候，就会从作用域链中搜索具有相应名字的变量。一般来说，当函数执行完毕后，局部活动对象会被销毁，内存中仅保存全局作用域（全局执行环境的变量对象）。
但是闭包的情况不同

function f1(){
var a = 1;
return function f2(){
   console.log(a);// 1
}
}

f1的活动对象会被添加到f2的作用域中。当函数f2倍返回之后，f2即可以在f1函数外部访问到f1函数内的局部变量。即使在f1执行完毕之后，其活动对象也不会被销毁，因为f2函数的作用域链仍然在引用这个活动对象。即当f1函数返回之后，其执行环境和作用域链会被销毁，但是它的活动对象会被保存在内存中
直到f2被销毁，f1的活动对象才会被销毁

（四）闭包概念

在JavaScript高级编程语言中，闭包的定义：有权访问另一个函数作用域中的变量的函数
在JavaScript语言中，只有函数内部的子函数才读取到局部变量的值，因此可以把闭包简单理解为“定义在一个函数内部的函数”，所以，闭包的本质就连接函数外部和函数内部的“一座桥梁”。

（五）：闭包的用途

闭包最大的两个用途：
（一）：读取函数内部的变量
（二）：让变量的值始终保持在内存中
举例说明：

　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）回收。

（六）使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。