从javascript代码解析过程理解执行上下文与作用域提升

一颗冰淇淋

javascript代码解析过程

执行上下文和作用域是javascript中非常重要的部分,要弄清楚它们首先就要说到javascript的运行机制,javascript代码被解析经过了以下几个步骤

  • Parser模块将javascript源码解析成抽象语法树(AST)
  • Ignition模块将抽象语法树编译成字节码(byteCode),再编译成机器码
  • 当函数被执行多次时,Ignition会记录优化信息,由Turbofan直接将抽象语法树编译成机器码

全局上下文

了解完以上javascript运行机制之后,我们来看看以下全局代码的执行方式

console.log(user)
var user = 'alice' 
var num = 16
console.log(num)

以上代码经过如下步骤才被执行

  1. javascript --> ast

    • 全局创建一个GO( GlobalObject)对象,GO中有很多内置模块,如Math、String、以及window属性,其中window的值为this,也就是自身GO对象
    • 全局定义的变量user和num会添加GO对象中,并赋值为undefined
  2. ast --> Ignition

    • V8引擎执行代码时,存在调用栈(ECStack),此时创建全局上下文栈(Global Excution Context)
    • GEC存在VO(variable Object),在全局上下文中指向GO对象
  3. Ignition --> 运行结果

    • 通过VO找到GO
    • 将user赋值为alice,将num赋值为16

图示如下

以上代码的执行的结果为

undefined
16
  • parser模块将源代码编译为AST时,已经将user和num定义到VO对象中,值为undefined
  • 打印user的时候,没有执行到user的赋值语句,所以user的值仍然为undefined
  • 打印num的时候,已经执行了给num赋值的语句,所以num的值为16

函数上下文

定义函数的时候,执行方式和全局又有些不同

var name = 'alice' 

foo(12) 
function foo(num){ 
    console.log(m)
    var m = 10 
    var n = 20 
    console.log("foo") 
}

以上代码经过如下步骤才被执行

  1. javascript --> ast

    • 全局创建一个GO( GlobalObject)对象,GO中有很多内置模块,如Math、String、以及window属性,其中window的值为this,也就是自身GO对象
    • 全局定义的变量name会添加GO对象中,并赋值为undefined
    • 函数foo会开辟一块内存空间,比如为0x100,用来存储父级作用域(parent scope)和自身代码块,函数foo的父级作用域就是全局对象GO
    • 将foo添加到GO对象中,赋值为内存地址,如0x100
  2. ast --> Ignition

    • V8引擎执行代码时,存在调用栈(ECStack),此时创建全局上下文栈(Global Excution Context)
    • GEC存在VO(variable Object),在全局上下文中指向GO对象
  3. Ignition --> 运行结果
    (1)执行全局代码

    • 通过VO找到GO
    • 将name赋值为alice
    • 执行函数foo前,创建函数执行上下文(Function Excution Context),存在VO指向AO对象
    • 创建Activation Object,将num、m都定义为undefined

    (2) 执行函数

    • 将num赋值为12,m赋值为10,n赋值为20
    • 函数foo执行完成,从调用栈(ECStack)栈顶弹出

图示如下

所以上面代码执行结果为

undefined

预编译

在Parser模块将javascript源码编译成AST时,还经过了一些细化的步骤

  • Stram将源码处理为统一的编码格式
  • Scanner进行词法分析,将代码转成token
  • token会被转换成AST,经过preparser和parser模块

parser用来解析定义在全局的函数和变量,定义在函数中的函数只会经过预解析Preparser

闭包的执行顺序

var user = "alice"

foo(12) 
function foo(num){ 
    console.log(m)
    var m = 10
    
    function bar(){ 
        console.log(user)
    } 
    bar() 
} 

以上代码经过如下步骤才被执行

  1. javascript --> ast

    • 全局创建一个 GO( GlobalObject)对象,GO中有很多内置模块,如Math、String、以及window属性,其中window的值为this,也就是自身GO对象
    • 全局定义的变量user会添加GO对象中,并赋值为undefined
    • 函数foo会开辟一块内存空间,比如为0x100,用来存储父级作用域(parent scope)和自身代码块,函数foo的父级作用域就是全局对象GO
    • 将foo添加到GO对象中,赋值为内存地址,如0x100
  2. ast --> Ignition

    • V8引擎执行代码时,存在调用栈(ECStack),此时创建全局上下文栈(Global Excution Context)
    • GEC存在VO(variable Object),在全局上下文中指向GO对象
  3. Ignition --> 运行结果
    (1)执行全局代码

    • 通过VO找到GO
    • 将user赋值为alice
    • 执行函数foo前,创建foo函数的执行上下文(Function Excution Context),存在VO(variable Object)指向AO(Activation Object)对象
    • 创建Activation Object,将num、m都定义为undefined
    • 为函数bar开辟内存空间 0x200,用来存储父级作用域和自身代码,bar的父级作用域为函数foo的作用域AO+全局作用域GO
    • 将bar添加到foo的AO对象中,赋值为内存地址,0x200

    (2) 执行函数foo

    • 将num赋值为12,m赋值为10

    (3) 执行函数bar

    • 创建bar的执行上下文,存在VO(variable Object)指向AO(Activation Object)对象
    • 创建Activation Object,此时AO为空对象
    • 函数bar执行完成,从调用栈(ECStack)栈顶弹出
    • 函数foo也执行完成了,从调用栈(ECStack)栈顶弹出

所以上面代码执行结果为

undefined
alice
  • m 在打印的时候还没有被赋值,所以为undefined
  • 打印user,首先在自己作用域中查找,没有找到,往上在父级作用域foo的AO对象中查找,还没有找到,就找到了全局GO对象中

作用域

作用域是在解析成AST(抽象语法树)的时候确定的,与它在哪里被调用没有联系

var message = "Hello Global"

function foo(){ 
    console.log(message) 
} 

function bar(){ 
    var message = "Hello Bar"
    foo() 
} 
bar()

以上代码经过如下步骤才被执行

  1. javascript --> ast

    • 全局创建一个 GO( GlobalObject)对象
    • 全局定义的变量message会添加GO对象中,并赋值为undefined
    • 函数foo开辟一块内存空间,为0x100,用来存储父级作用域(parent scope)和自身代码块,函数foo的父级作用域就是全局对象GO
    • 将foo添加到GO对象中,赋值为内存地址,0x100
    • 函数bar开辟一块内存空间,为0x200,用来存储父级作用域(parent scope)和自身代码块,函数foo的父级作用域就是全局对象GO
    • 将bar添加到GO对象中,赋值为内存地址,0x200
  2. ast --> Ignition

    • V8引擎执行代码时,存在调用栈(ECStack),此时创建全局上下文栈(Global Excution Context)
    • GEC存在VO(variable Object),在全局上下文中指向GO对象
  3. Ignition --> 运行结果
    (1)执行全局代码

    • 通过VO找到GO
    • 将message赋值为Hello Global
    • 执行函数bar前,创建bar函数的执行上下文(Function Excution Context),存在VO(variable Object)指向AO(Activation Object)对象
    • 创建Activation Object,将message定义为undefined

    (2) 执行函数bar

    • 将message赋值为Hello Bar

    (3) 执行函数foo

    • 创建foo的执行上下文,存在VO(variable Object)指向AO(Activation Object)对象
    • 创建Activation Object,此时AO为空对象
    • 打印 message,此时自己作用域内没有message,向上查找父级作用域,foo的父级作用域为GO
    • 函数foo执行完成,从调用栈(ECStack)栈顶弹出
    • 函数bar也执行完成了,从调用栈(ECStack)栈顶弹出

所以最后输出的结果为

Hello Gloabl

图示如下

易混淆点

一、 没有通过var标识符声明的变量会被添加到全局

var n = 100 

function foo(){ 
    n = 200
} 

foo()
console.log(n)

执行过程如下

  1. javascript --> ast

    • GO对象中将n定义为undefined
    • 开辟foo函数的内存空间0x100,父级作用域为GO
    • 将foo添加到GO对象中,值为0x100
  2. ast --> Ignition

    • 创建全局上下文,VO指向GO
    • 执行foo函数前,创建函数上下文,VO对象指向AO对象
    • 创建AO对象,AO为空对象
  3. 赋值

    • GO中的变量n被赋值为100
    • 执行foo函数中的赋值,因为没有var标识符声明,所以直接给全局GO中的n赋值200

所以此时执行结果为

200

二、函数作用域内有变量,就不会向父级作用域查找

function foo(){ 
    console.log(n) 
    var n = 200 
    console.log(n) 
} 

var n = 100
foo()

执行顺序如下

  1. javascript --> ast

    • GO对象中添加变量n,值为undefined
    • 为函数foo开辟内存空间0x300,父级作用域为GO
    • 将foo添加到GO对象中,值为0x300
  2. ast ---> Ignition

    • 创建全局上下文,VO指向GO
    • 执行函数foo之前创建函数上下文,VO指向AO
    • 创建AO对象,添加变量n,值为undefined
  3. 赋值

    • 将GO中的n赋值为100
    • 执行foo,打印n,此时先在自己的作用域内查找是否存在变量n,AO中存在n值为undefined,所以不会再向父级作用域中查找
    • 将AO中n赋值为200
    • 打印n,此时自己作用域中存在n,值为200

所以执行结果为

undefined
200

三、return语句不影响ast的生成
在代码解析阶段,是不会受return语句的影响,ast生成的过程中,只会去查找var 和 function标识符定义的内容

var a = 100 
function foo(){ 
    console.log(a) 
    return 
    var a = 100 
    console.log(a)
} 
foo()

执行过程如下

  1. javascript --> ast

    • GO对象中将a定义为undefined
    • 开辟foo函数的内存空间0x400,父级作用域为GO
    • 将foo添加到GO对象中,值为0x400
  2. ast --> Ignition

    • 创建全局上下文,VO指向GO
    • 执行foo函数前,创建函数上下文,VO对象指向AO对象
    • 创建AO对象,将a添加到AO对象中,值为undefined
  3. 赋值

    • GO中的变量a被赋值为100
    • 执行foo函数,打印a,此时a没有被定义,所以输出undefined
    • 执行return,return后面的代码不会执行

所以执行结果为

undefined

四、连等赋值
var a = b = 10,相当于var a = 10; b = 10

function foo(){ 
    var a = b = 10
} 
foo() 
console.log(b)
console.log(a) 

执行过程如下

  1. javascript --> ast

    • 创建GO对象,GO对象为空
    • 开辟foo函数的内存空间0x500,父级作用域为GO
    • 将foo添加到GO对象中,值为0x500
  2. ast --> Ignition

    • 创建全局上下文,VO指向GO
    • 执行foo函数前,创建函数上下文,VO对象指向AO对象
    • 创建AO对象,将a添加到AO对象中,值为undefined
  3. 赋值

    • 执行foo函数,var a = b = 10,相当于var a = 10; b = 10,a变量有标识符,所以a被添加到AO对象中,赋值为10,b没有表示符,所以b被添加到全局对象GO,赋值为10
    • 打印b,GO对象中能找到b,值为10
    • 打印a,GO对象中没有a,且没有父级作用域,无法向上查找,此时报错

所以执行结果为

10
Uncaught ReferenceError: a is not defined

以上就是如何从javascript代码解析过程理解执行上下文与作用域提升的具体介绍,关于js高级,还有很多需要开发者掌握的地方,可以看看我写的其他博文,持续更新中~

阅读 200

hello

30 声望
1 粉丝
0 条评论
你知道吗?

hello

30 声望
1 粉丝
文章目录
宣传栏