实例详解JavaScript闭包

一、闭包的概念

定义参考《JavaScript高级程序设计第三版》,闭包指的的有权访问另一个函数作用域中的变量的函数。其中要注意的是闭包指的是一个函数。
举例来说:

function outFun() {
   var a = 1;

   return function () {
     console.log(a);
    }
}
var myFun = outFun();
myFun(); // 1

外部的outFun函数中包含返回了一个匿名函数,而匿名函数中使用了outFun中的a变量,那么这个匿名函数就是一个闭包,在外部的outFun执行环境被销毁之后其仍可以使用outFun作用域中的变量a。
在了解闭包的概念后,要想深入理解闭包需要了解函数的执行环境的相关知识。

二、函数的执行环境与作用域链

每个执行环境都有一个与之相关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。

在某个函数被调用时,会创建一个执行环境及相应的作用域链,使用arguments和其他命名参数的值来初始化函数的活动对象活动对象包含了所有局部变量命名参数函数集合以及this

在函数环境中执行时使用其活动对象作为变量对象

全局环境的变量对象始终存在,而函数这种局部环境的变量对象,则只在函数执行过程当中存在。

以一开始的outFun函数为例,在创建这个函数时,会创建一个预先包含全局变量对象的作用域链,保存在内部的[[Scope]]属性中。
当调用这个函数时,会为函数创建一个执行环境,然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。然后,outFun函数的本地活动对象被创建并退日执行环境作用域链的前端

我们将以上的例子放入浏览器中执行并调试,来分析其执行过程:
首先加入断点和watch,可以看到在函数执行前,outFun的预先包含的作用域链保存在[[Scope]]属性中,其中只有global这一个全局变量对象。
而右边调试窗口的Scope中显示了此时作用域中的变量只有全局变量对象。
这里写图片描述
然后继续向下执行outFun函数到函数内部,将a赋值为1,此时可以看到当前Scope作用域中包含了本地的活动对象Local,其中有变量值a为1,而this指向了window,即outFun的作用域链中包含两个对象,一是outFun本身运行时生成的活动对象,二是全局的变量对象。
这里写图片描述
outFun执行过后,将返回的匿名函数赋值给了myFun变量,即此时这个匿名函数被创建,可以从watch中看到,变量myFun即刚刚创建的这一匿名函数的[[Scope]]属性中有两个对象,一个是outFun的活动对象,一个是全局的变量对象。
这里写图片描述
最后进行此匿名函数的执行。在执行到函数内部时可以看到,作用域链中包含了三个对象:
1. 匿名函数运行时其生成的活动对象
2. 其外部函数即outFun的活动对象,其中有值a
3. 全局的变量对象Global
即这个匿名函数就是一个闭包,其中包含了另一个函数(即outFun)的变量。
这里写图片描述

所以总结作用域链本质上是一个指向变量对象指针列表,它只引用但不实际包含变量对象。

而闭包的原理就是:闭包的作用域链上引用了另一个函数的作用域中的变量,被引用的函数在执行完毕后,由于其被引用,其活动对象不会被销毁而只销毁了其执行环境的作用域链。

从上面的例子来分析,由于outFun返回的匿名函数引用了outFun的a变量,所以在outFun执行完毕,返回这一匿名函数时,其活动对象不会被销毁,仍在内存当中。
直到这一匿名函数被销毁,执行完毕后,outFun的活动变量才会被销毁。
如执行以下,取消对匿名函数的引用以释放内存:

myFun = null;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值