当前位置是:汇盛国际 > 图文帮助 > 图文帮助

深入理解JavaScript系列(14) 作用域链介绍(Scope

来源:caddoing.com 作者:百据 发布时间:2018-05-09 点击量:

  

[深入理解JavaScript,作用域链]深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)

  前言  
在第12章关于变量对象的描述中,我们已经知道一个执行上下文 的数据(变量、函数声明和函数的形参)作为属性存储在变量对象中。

  
同时我们也知道变量对象在每次进入上下文时创建,并填入初始值,值的更新出现在代码执行阶段。

  
这一章专门讨论与执行上下文直接相关的更多细节,这次我们将提及一个议题——作用域链。

  
英文原文:  
中文参考:  
本文绝大部分内容来自上述地址,仅做少许修改,感谢作者  
定义  
如果要简要的描述并展示其重点,那么作用域链大多数与内部函数相关。

  
我们知道,ECMAScript 允许创建内部函数,我们甚至能从父函数中返回这些函数。

  
代码如下:

  
var x = 10;  
function foo() {  
var y = 20;  
function bar() {  
alert(x + y);  
}  
return bar;  
}  
foo()(); // 30  
  
这样,很明显每个上下文拥有自己的变量对象:对于全局上下文,它是全局对象自身;对于函数,它是活动对象。

  
作用域链正是内部上下文所有变量对象(包括父变量对象)的列表。此链用来变量查询。即在上面的例子中,“bar”上下文的作用域链包括AO(bar)、AO(foo)和VO(global)。

  
但是,让我们仔细研究这个问题。

  
让我们从定义开始,并进深一步的讨论示例。

  
作用域链与一个执行上下文相关,变量对象的链用于在标识符解析中变量查找。

  
函数上下文的作用域链在函数调用时创建的,包含活动对象和这个函数内部的[[scope]]属性。下面我们将更详细的讨论一个函数的[[scope]]属性。

  
在上下文中示意如下:  
代码如下:

  
activeExecutionContext = {  
VO: {...}, // or AO  
this: thisValue,  
Scope: [ // Scope chain  
// 所有变量对象的列表  
// for identifiers lookup  
]  
};  
  
其scope定义如下:  
Scope = AO + [[Scope]]  
这种联合和标识符解析过程,我们将在下面讨论,这与函数的生命周期相关。

  
函数的生命周期  
函数的的生命周期分为创建和激活阶段(调用时),让我们详细研究它。

  
函数创建  
众所周知,在进入上下文时函数声明放到变量/活动(VO/AO)对象中。让我们看看在全局上下文中的变量和函数声明(这里变量对象是全局对象自身,我们还记得,是吧?)  
代码如下:

  
var x = 10;  
function foo() {  
var y = 20;  
alert(x + y);  
}  
foo(); // 30  
  
在函数激活时,我们得到正确的(预期的)结果--30。但是,有一个很重要的特点。

  
此前,我们仅仅谈到有关当前上下文的变量对象。这里,我们看到变量“y”在函数“foo”中定义(意味着它在foo上下文的AO中),但是变量“x”并未在“foo”上下文中定义,相应地,它也不会添加到“foo”的AO中。乍一看,变量“x”相对于函数“foo”根本就不存在;但正如我们在下面看到的——也仅仅是“一瞥”,我们发现,“foo”上下文的活动对象中仅包含一个属性--“y”。

  
代码如下:

  
fooContext.AO = {  
y: undefined // undefined – 进入上下文的时候是20 – at activation  
};  
  
函数“foo”如何访问到变量“x”?理论上函数应该能访问一个更高一层上下文的变量对象。实际上它正是这样,这种机制是通过函数内部的[[scope]]属性来实现的。

  
[[scope]]是所有父变量对象的层级链,处于当前函数上下文之上,在函数创建时存于其中。

  
注意这重要的一点--[[scope]]在函数创建时被存储--静态(不变的),永远永远,直至函数销毁。即:函数可以永不调用,但[[scope]]属性已经写入,并存储在函数对象中。

  
另外一个需要考虑的是--与作用域链对比,[[scope]]是函数的一个属性而不是上下文。考虑到上面的例子,函数“foo”的[[scope]]如下:  
代码如下:

  
foo.[[Scope]] = [  
globalContext.VO // === Global  
];  
  
举例来说,我们用通常的ECMAScript 数组展现作用域和[[scope]]。



上一篇:js弹出对话框方式小结

下一篇:快速查找数组中的某个元素并返回下标示例