我们通过引擎执行知道代码执行走向,但是他具体是怎么执行的呢
这就要从他的执行上下文(execution context)来说起来。
执行上下文
执行一段代码,就会存在上下文。上下文主要分为两种:
global context
function context
看下图,比较直观
可以很清楚的看到,最外层的就是全局上下文,函数里的是function context, 里面的execution context 就是 function execution context.
我们应该知道,这段代码可以访问上下文之外的代码(变量,函数…), 但是外部却无法获取内部的变量等,这是为什么?
execution context stack
我们前面说过,浏览器是单线程在执行,一次只能做一件事,后面的需要排队进入execution stack。
看下面的例子:
可以看到,执行的上下文会放入 execution context 去执行,如果当前的额上下文执行结束,就会回到前一个上下文去执行,直到全局上下文结束。
关于execution stack
的五个点:
- 单线程
- 同步执行
- 一个全局上下文
- 可以无数个函数上下文
- 每个函数的调用都会创建一个上下文,包括自调用
执行上下文详解
上面说了,每次调用函数时都会创建一个上下文。js的解释器对于上下文的执行分了两个阶段.
创建阶段 Creation Stage
这个发生在调用函数的时候,并且在执行内部任何代码之前。- 创建作用域链(Scope chain)
- 创建变量,函数,参数…
- 确定当前上下文的
this
代码执行阶段(Activation / Code Execution Stage)
- 分配值,引用函数和解释/执行代码。
上面的创建阶段,可以这么理解
executionContextObj = {
'scopeChain': { /* 变量对象加上父级上线问的变量对象 */ },
'variableObject': { /* 函数的参数,内部的方法变量声明等 */ },
'this': {}
}
Activation / Variable Object [AO/VO]
上面的executionContextObj
是在调用函数并且真正的执行函数之前创建的,也就是在Creation Stage
创建的。
这里解释器会扫描传入的参数和内部的变量声明以及函数声明,最终的结果是在executionContextObj
中生成variableObject
.生成 VO
(variableObject)的过程
需要经过AO
(activation object)阶段。
简单的来概述下解释器是怎么来处理的.
- 运行代码来调用函数
- 在执行代码函数执行,先去创建上下文.
- 进入创建阶段
- 初始化作用域链
- 创建变量对象(vo)
- 创建arguments对象,检查当前上下文的参数,初始化名称和值并创建引用副本
- 扫描当前上下文的函数声明
- 扫描到来函数声明,那就在vo(variable object)里创建他的名称,并且指针是指向内存中函数引用的地址
- 如果扫描的函数声明已存在,那就覆盖vo中的引用指针
- 扫描当前上下文的变量声明
- 扫到变量声明,在vo中添加变量名称,并且初始化值是undefined
- 如果vo中存在变量名称,那就不做处理,继续扫描
- 确定当前上下文的
this
指向
- 激活/执行阶段
- 在上下文中运行/解释函数,并在代码逐行执行时分配变量值。
在上面的VO的时候可以发现,函数是被特殊照顾了, 先于变量的处理,所以为啥在变量提升的时候,函数被提到函数顶部了,所以,函数是第一等公民,哈哈
下面来看一个例子:
function foo(i) {
var a = 'hello';
var b = function privateB() {
};
function c() {
}
}
foo(22);
当调用foo(22)
的时候,创建阶段看起来类似于下面这样
fooExecutionContext = {
scopeChain: { ... },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
c: pointer to function c()
a: undefined,
b: undefined
},
this: { ... }
}
可以发现,在创建阶段, 对于变量,是初始化为undefined, 但是对于传递进来的参数却是不同,他是直接赋值。zai这里创建阶段完成之后,就会进入激活/执行阶段。
fooExecutionContext = {
scopeChain: { ... },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
c: pointer to function c()
a: 'hello',
b: pointer to function privateB()
},
this: { ... }
}
关于提升(Hoisting)
(function() {
console.log(typeof foo);
console.log(typeof bar);
var foo = 'hello',
bar = function() {
return 'world';
};
function foo() {
return 'hello';
}
}());
为什么一个是function 一个是undefined.你可能会说是因为变量提升,现在我们知道了上面的知识,可以回答了。
- 为什么我们可以在申明
foo
之前访问到他?
很简单,在代码执行阶段(Activation / Code Execution Stage),我们已经过了创建阶段的VO
过程,这时候是undefined
.
- 为什么
foo
被声明了两次,显示的是function,却不是undefined或者string
在VO
阶段,我们知道函数的处理会在变量的前面,在变量进行AO
(activation object)的时候,VO
已经存在了。对于变量,如果存在同名属性,就会向下扫描。
- 为什么
bar
是undefined
因为在AO
的过程,对于变量 是需要初始化为undefined
存在VO
里。
原文:
不错的外链: