编写一段JavaScript代码,它是如何执行的呢?简单来说,JS引擎在执行JavaScript代码的过程中需要先解析再执行。那么在解析阶段JS引擎又会进行哪些操作,接下来就一起来了解一下JavaScript在执行过程中的详细过程,包括执行上下文、GO、AO、VO和VE等概念的理解。
首先,JS引擎会在执行代码之前,也就是解析代码时,会在我们的堆内存创建一个全局对象:Global Object(简称GO),观察以下代码,在全局中定义了几个变量:
示例代码:
var name = 'curry'
var message = 'I am a coder'
var num = 30
JS引擎内部在解析以上代码时,会创建一个全局对象(伪代码如下):
var GlobalObject = {
Math: '类',
Date: '类',
String: '类',
setTimeout: '函数',
setInterval: '函数',
window: GlobalObject,
...
name: undefined,
message: undefined,
num: undefined
}
了解了什么是全局对象后,下面就来聊聊代码具体执行的地方。JS引擎为了执行代码,引擎内部会有一个执行上下文栈(Execution Context Stack,简称ECS),它是用来执行代码的调用栈。
(1)ECS如何执行?先执行谁呢?
(2)那么全局执行上下文(GEC)包含那些内容呢?
**第一部分:**执行代码前。
在转成抽象语法树之前,会将全局定义的变量、函数等加入到Global Object中,也就是上面初始化全局对象的过程;
但是并不会真正赋值(表现为undefined),所以这个过程也称之为变量的作用域提升(hoisting);
**第二部分:**代码执行。
对变量进行赋值,或者执行其它函数等;
下面就通过一幅图,来看看GEC被放入ECS后的表现形式:
接下来,将全局代码复杂化一点,再来看看调用栈调用全局执行上下文(GEC)的过程。
实例代码:
var name = 'curry'
console.log(message)
var message = 'I am a coder'
function foo() {
var name = 'foo'
console.log(name)
}
var num1 = 30
var num2 = 20
var result = num1 + num2
foo()
调用栈调用过程:
1.初始化全局对象。
这里需要注意的是函数存放的是地址,会指向函数对象,与普通变量有所不同;
从上往下解析JS代码,当解析到foo函数时,因为foo不是普通变量,并不会赋为undefined,JS引擎会在堆内存中开辟一块空间存放foo函数,在全局对象中引用其地址;
这个开辟的函数存储空间最主要存放了该函数的父级作用域和函数的执行体代码块;
4.从上往下开始执行全局代码,依次对GO对象中的全局变量进行赋值。
当执行var name = 'curry'
时,就从VO(对应的就是GO)中找到name属性赋值为curry;
接下来执行console.log(message)
,就从VO中找到message,注意此时的message还为undefined,因为message真正赋值在下一行代码,所以就直接打印undefined(也就是我们经常说的变量作用域提升);
后面就依次进行赋值,执行到var result = num1 + num2
,也是从VO中找到num1和num2两个属性的值进行相加,然后赋值给result,result最终就为50;
最后执行到foo()
,也就是需要去执行foo函数了,这里的操作是比较特殊的,涉及到函数执行上下文,下面来详细了解;
在执行全局代码遇到函数如何执行呢?
在执行的过程中遇到函数,就会根据函数体创建一个函数执行上下文(Functional Execution Context,简称FEC),并且加入到执行上下文栈(ECS)中。
函数执行上下文(FEC)包含三部分内容:
AO:在解析函数时,会创建一个Activation Objec(AO);
作用域链:由函数VO和父级VO组成,查找是一层层往外层查找;
this指向:this绑定的值,在函数执行时确定;
其实全局执行上下文(GEC)也有自己的作用域链和this指向,只是它对应的作用域链就是自己本身,而this指向为window。
继续来看上面的代码执行,当执行到foo()
时:
console.log(name)
时,就会去foo的VO(对应的就是foo函数的AO)中找到name属性值并打印;上文中提到了很多次VO,那么VO到底是什么呢?下面从ECMA新旧版本规范中来谈谈VO。
在早期ECMA的版本规范中:每一个执行上下文会被关联到一个变量环境(Variable Object,简称VO),在源代码中的变量和函数声明会被作为属性添加到VO中。对应函数来说,参数也会被添加到VO中。
在最新ECMA的版本规范中:每一个执行上下文会关联到一个变量环境(Variable Environment,简称VE),在执行代码中变量和函数的声明会作为**环境记录(Environment Record)**添加到变量环境中。对于函数来说,参数也会被作为环境记录添加到变量环境中。
了解了上面相关的概念和调用流程之后,就来看一下存在函数嵌套调用的代码是如何执行的,以及执行过程中的一些细节,以下面代码为例:
var message = 'global'
function foo(m) {
var message = 'foo'
console.log(m)
function bar() {
console.log(message)
}
bar()
}
foo(30)
初始化全局对象(GO),执行全局代码前创建GEC,并将GO关联到VO,然后将GEC加入ECS中:
foo函数存储空间中指定的父级作用域为全局对象;
开始执行全局代码,从上往下依次给全局属性赋值:
给message属性赋值为global;
执行到foo函数调用,准备执行foo函数前,创建foo函数的AO:
bar函数存储空间中指定父级作用域为foo函数的AO;
创建foo函数的FEC,并加入到ECS中,然后开始执行foo函数体内的代码:
根据foo函数调用的传参,给形参m赋值为30,接着给message属性赋值为foo;
所以,m打印结果为30;
执行到bar函数调用,准备执行bar函数前,创建bar函数的AO:
bar函数中没有定义属性和声明函数,以空对象表示;
创建bar函数的FEC,并加入到ECS中,然后开始执行bar函数体内的代码:
执行console.log(message)
,会先去bar函数自己的VO中找message,没有找到就往上层作用域的VO中找;
这里bar函数的父级作用域为foo函数,所以找到foo函数VO中的message为foo,打印结果为foo;
名词 | 解释 |
---|---|
ECS | 执行上下文栈(Execution Context Stack),也可称为调用栈,以栈的形式调用创建的执行上下文 |
GEC | 全局执行上下文(Global Execution Context),在执行全局代码前创建 |
FEC | 函数执行上下文(Functional Execution Context),在执行函数前创建 |
VO | Variable Object,早期ECMA规范中的变量环境,对应Object |
VE | Variable Environment,最新ECMA规范中的变量环境,对应环境记录 |
GO | 全局对象(Global Object),解析全局代码时创建,GEC中关联的VO就是GO |
AO | 函数对象(Activation Object),解析函数体代码时创建,FEC中关联的VO就是AO |
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/MomentYY/p/15785719.html
内容来源于网络,如有侵权,请联系作者删除!