理解闭包(一)

本文详细介绍了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),这时一定要小心,不要随便改变父函数内部变量的值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值