javascript的执行上下文/(Execution context,EC)
作为个前端菜鸟,code时经常会遇到一些”奇怪”的行为,不是很明白为什么JavaScript会这么工作,在网上查找了一些技术博客,在这里介绍下js的执行上下文这个知识点,我本人也是一知半解,大家共享。
在JavaScript中有三种代码运行环境:
- Global Code:JavaScript代码开始运行的默认环境
- Function Code:代码进入一个JavaScript函数
- Eval Code:使用eval()执行代码
为了表示不同的运行环境,JavaScript中有一个执行上下文(Execution context,EC)的概念。也就是说,当JavaScript代码执行的时候,会进入不同的执行上下文,这些执行上下文就构成了一个执行上下文栈(Execution context stack,ECS)。
例如对如下面的JavaScript代码:
var a = "global var";
function foo(){
console.log(a);
}
function outerFunc(){
var b = "var in outerFunc";
console.log(b);
function innerFunc(){
var c = "var in innerFunc";
console.log(c);
foo();
}
innerFunc();
}
outerFunc()
代码首先进入Global Execution Context,然后依次进入outerFunc,innerFunc和foo的执行上下文,执行上下文栈就可以表示为:
当JavaScript代码执行的时候,第一个进入的总是默认的Global Execution Context,所以说它总是在ECS的最底部。
对于每个Execution Context都有三个重要的属性,变量对象(Variable object,VO),作用域链(Scope chain)和this。这三个属性跟代码运行的行为有很重要的关系,下面会一一介绍。
当然,除了这三个属性之外,根据实现的需要,Execution Context还可以有一些附加属性。
VO与AO
VO:变量对象是与执行上下文相关的数据作用域。它是一个与上下文相关的特殊对象,其中存储了在上下文中定义的变量和函数声明。也就是说,一般VO中会包含以下信息:
- 函数声明 (Function Declaration, FD);
- 函数的形参
- 变量 (var, Variable Declaration);
当JavaScript代码运行中,如果试图寻找一个变量的时候,就会首先查找VO。对于前面例子中的代码,Global Execution Context中的VO就可以表示如下:
注意,假如上面的例子代码中有下面两个语句,Global VO仍将不变。
(function bar(){}) // function expression, FE
baz = "property of global object"
也就是说,对于VO,是有下面两种特殊情况的:
- 函数表达式(与函数声明相对)不包含在VO之中
- 没有使用var声明的变量(这种变量是,”全局”的声明方式,只是给Global添加了一个属性,并不在VO中)
AO:只有全局上下文的变量对象允许通过VO的属性名称间接访问;在函数执行上下文中,VO是不能直接访问的,此时由激活对象(Activation Object,缩写为AO)扮演VO的角色。激活对象 是在进入函数上下文时刻被创建的,它通过函数的arguments属性初始化。
Arguments Objects 是函数上下文里的激活对象AO中的内部对象,它包括下列属性:
- callee:指向当前函数的引用
- length: 真正传递的参数的个数
- properties-indexes:就是函数的参数值(按参数列表从左到右排列)
对于VO和AO的关系可以理解为,VO在不同的Execution Context中会有不同的表现:当在Global Execution Context中,可以直接使用VO;但是,在函数Execution Context中,AO就会被创建
当上面的例子开始执行outerFunc的时候,就会有一个outerFunc的AO被创建:
细看Execution Context
当一段JavaScript代码执行的时候,JavaScript解释器会创建Execution Context,其实这里会有两个阶段:
- 创建阶段(当函数被调用,但是开始执行函数内部代码之前)
- 创建Scope chain
- 创建VO/AO(variables, functions and arguments)
- 设置this的值
- 激活/代码执行阶段
- 设置变量的值、函数的引用,然后解释/执行代码
对于”创建VO/AO”这一步,JavaScript解释器主要做了下面的事情:
- 根据函数的参数,创建并初始化arguments object
- 扫描函数内部代码,查找函数声明(Function declaration)
- 对于所有找到的函数声明,将函数名和函数引用存入VO/AO中
- 如果VO/AO中已经有同名的函数,那么就进行覆盖
- 扫描函数内部代码,查找变量声明(Variable declaration)
- 对于所有找到的变量声明,将变量名存入VO/AO中,并初始化为”undefined”
- 如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性
看下面的例子:
function foo(i) {
var a = 'hello';
var b = function privateB() {
};
function c() {
}
}
foo(22);
对于上面的代码,在”创建阶段”,可以得到下面的Execution Context object:
fooExecutionContext = {
scopeChain: { ... },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
c: pointer to function c()
a: undefined,
b: undefined
},
this: { ... }
}
在”激活/代码执行阶段”,Execution Context object就被更新为:
fooExecutionContext = {
scopeChain: { ... },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
c: pointer to function c()
a: 'hello',
b: pointer to function privateB()
},
this: { ... }
}
后记
这篇文章基本上是copy网上的代码,不好意思,哈哈哈