Javascript中闭包的作用域链

开发 前端
本文先阐述了闭包和作用域链的关系,然后分析了产生这些个问题的原因,一起来看。

作用域定义了在当前上下文中能够被访问到的成员,在Javascript中分为全局作用域和函数作用域,通过函数嵌套可以实现嵌套作用域。

闭包一般发生在嵌套作用域中。闭包是JavaScript最强大的特性之一,很多高级应用都要依靠闭包实现。如OO的私有成员和模块化等。然而闭包虽然强大,但一般比较占用内存另外如果使用不当还会引起内存泄露,对闭包有了解的jser一般都知道闭包的这些个问题,本文先阐述了闭包和作用域链的关系,然后分析了产生这些个问题的原因。下面是一段闭包的示例代码:

 

  1. var name = "windows's name";  
  2. var object = {  
  3. name : "object's name",  
  4. getNameFunc:function(){  
  5. var that = this;  
  6. return function(){  
  7. return that.name;  
  8. }  
  9. }  
  10. };  
  11. console.log(object.getNameFunc()()); 

 

当javascript代码执行时会创建一个执行上下文对象,执行上下文对象包含一个作用域链,作用域链有一个或多个变量对象组成,作用域链中保存的是对变量对象的引用。变量对象定义了在当前作用域中声明的变量和函数。

在代码的执行过程中JAVASCRIPT引擎会按照自上而下的顺序检索作用链中的变量对象的成员来解析需要被访问(读或写)的变量或函数,在检索过程中如果在作用域链的某个变量对中象查找到与之匹配的标识符就会终止检索。

通过这种方式当在代码中如果有同名的变量就可以区分出来我们要操作那个变量。当代码载入完成后 Javascript引擎会创建一个全局的执行上下文,全局执行上下文的作用域链只包含一个全局变量对象。Javascript的函数对象拥有一个私有的socpe属性,当函数被创建时会使用当前的作用域链初始化函数scope属性。

当函数被执行时会创建函数的执行上下文对象和当前作用域的变量对象,创建函数的执行上下文对象时先使用函数的scope属性给执行上下文对象的作用域链赋值,再把创建的变量对象放入作用域链的顶端来初始化执行上下文的作用域链。位于作用域链顶端的变量对象也称为活动对象。默认情况下当函数返回时会销毁它的活动对象和作用域链,这也是为什么我们函数的外部不能够访问到在函数内部定义的成员。

然而在发生闭包的情况下,当内部函数被创建时,内部函数的scope属性指向包含它的外部函数的作用域链。这时内部函数引用了外部函数的活动对象,当外部函数返回时,它的活动对象没有被释放,直到引用它的内部函数被销毁时才会释放外层函数的活动对象。所以它所包含的内部函数仍然可以访问在外部函数中定义的成员,另外这也是闭包比较占用内存的原因。

内存泄露问题是由于部分浏览器使用引用计数来作为垃圾回收机制,当在我们的代码中发生了循环引用时,就会造成资源不能被回收从而引起内存泄露。发生内存泄露有时是因为在我们的代码中发生了明显的循环引用,有时则不那么明显。对于前者一般通过仔细检查代码就能发现问题所在,对于后者就需要我们对闭包有足够的了解才能发现。如下面代码:

  1. view sourceprint?function outerFunc(){  
  2. var obj = document.getElementById("element");  
  3. obj.onclick=function innerFunc(){  
  4. alert("Hi! I will leak");  
  5. };  
  6. obj.bigString=new Array(1000).join(new Array(3000).join("XXXXX"));  
  7. // This is used to make the leak significant  
  8. }; 

在上面这段代码中,外部函数outerFunc中的局部变量obj引用文档中ID为element的Dom元素,obj.onclick指向内部函数innerFunc的引用,内部函数innerFunc的scope属性指向的作用链中包含外部函数outerFunc的活动对象的引用,活动对象的obj成员再次指向文档中ID为element的Dom元素从而构成了循环引用。

【编辑推荐】

  1. 为你的网站添加上JavaScript禁用提示页面吧
  2. 让浏览器非阻塞加载javascript的几种方式
  3. JavaScript实现二级联动下拉框
  4. Javascript解决浏览器兼容性问题
责任编辑:于铁 来源: web编程之路
相关推荐

2017-09-14 13:55:57

JavaScript

2021-12-06 07:15:48

Javascript作用域闭包

2015-08-18 13:42:42

js作用域链变量

2020-12-16 11:09:27

JavaScript语言开发

2020-02-12 16:58:15

JavaScript前端技术

2019-03-13 08:00:00

JavaScript作用域前端

2011-09-06 09:56:24

JavaScript

2012-11-29 10:09:23

Javascript闭包

2015-11-26 13:11:24

javascript原型链作用域

2021-02-21 16:21:19

JavaScript闭包前端

2009-07-24 17:30:37

Javascript闭

2016-09-14 09:20:05

JavaScript闭包Web

2021-06-02 07:02:42

js作用域函数

2020-10-14 15:15:28

JavaScript(

2011-05-25 14:48:33

Javascript闭包

2023-10-26 07:47:35

JavaScript代码变量

2021-03-09 08:35:51

JSS作用域前端

2021-03-09 08:50:58

JavaScript前端作用域

2010-06-23 10:24:42

Javascript闭

2016-09-18 20:53:16

JavaScript闭包前端
点赞
收藏

51CTO技术栈公众号