一、JavaScript代码运行的各个阶段
JavaScript引擎在执行JavaScript代码时,会从上到下进行词法分析、语法分析、语义分析等处理,并在代码解析完成后生成AST(抽象语法树),最终根据AST生成CPU可以执行的机器码并执行
以V8引擎为例,在V8引擎中JavaScript代码的运行过程可以分为三个阶段:
1.语法分析阶段:该阶段会进行语法分析,检查是否有语法错误,如果发现语法错误会在控制台抛出异常并终止执行
2.编译阶段:该阶段会进行执行上下文的创建,包括创建变量对象、建立作用域链、确定this的指向等。每进入一个不同的运行环境时,V8引擎就会创建一个新的执行上下文
3.执行阶段:将编译阶段中创建的执行上下文压入调用栈,并成为正在运行的执行上下文,代码执行结束后,将其弹出调用栈
二、执行上下文的创建
执行上下文的创建离不开JavaScript的运行环境,JavaScript运行环境包括:全局环境、函数环境和eval,其中全局环境和函数环境的创建过程如下:
1.第一次载入JavaScript代码时,首先会创建一个全局环境。全局环境位于最外层,直到应用程序退出后(例如关闭浏览器和网页)才会被销毁
2.每个函数都有自己的运行环境,当函数被调用时,则会进入该函数的运行环境。当该环境中的代码被全部执行完毕后,该环境被销毁。不同的函数运行环境不一样,即使是同一个函数,在被多次调用时也会创建多个不同的函数环境
在不同的运行环境中,变量和函数可访问的其他数据范围不同,环境的行为(比如创建和销毁)也有所区别。而每进入一个不同的运行环境时,JavaScript都会创建一个新的执行上下文,该过程包括:
1.建立作用域链
2.创建变量对象VO
3.确定this的指向
创建变量对象
每个执行上下文都会有一个关联的变量对象,该对象上会保存这个上下文中定义的所有变量和函数
在浏览器中,全局环境的变量对象是window对象,因此所有的全局变量和函数都是作为window对象的属性和方法创建的。相应的,在Node中全局环境的变量对象则是global对象
创建变量对象将会创建arguments对象(仅函数环境下),同时会检查当下上下文的函数声明和变量声明
1.对于变量声明:此时会给变量分配内存,并将其初始化为undefined(该过程只进行定义声明,执行阶段才执行赋值语句)
2.对于函数声明,此时会在内存里创建函数对象,并且直接初始化为该函数对象
上述变量声明和函数声明就是我们常说的变量提升和函数提升。其中函数声明提升优先于变量声明提升
在各类编程语言中,作用域分为静态作用域和动态作用域。JavaScript采用的是词法作用域,也就是静态作用域。词法作用域中的变量,在编译过程中会产生一个确定的作用域
词法作用域中的变量,在编译过程中会产生一个确定的作用域,这个作用域即当前的执行上下文。在JavaScript中,词法环境又分为词法环境和变量环境。变量环境用来记录var/function等变量的声明;词法环境用来记录let/const/class等变量的声明
作用域链
作用域链就是将整个作用域通过某种方式连接在一起
作用域就是词法环境,而词法环境由两个成员组成:环境记录和外部词法环境引用。环境记录:用于记录自身词法环境中的变量对象;外部词法环境引用:记录外部词法环境的引用
通过外部词法环境的引用,作用域可以层层扩展,建立起从里到外延伸的一条作用域链。当某个变量无法在自身词法环境记录中找到时,可以根据外部词法环境引用向外进行查找,直到最外层的词法环境中外部词法环境引用为null,这便是作用域链的变量查询
闭包
闭包可以让我们从外部读取局部变量,在大多数项目中都会被使用到,常见的用途包括:
1.用于从外部读取其他函数内部变量的函数
2.可以使用闭包来模拟私有方法
3.可以让这些变量的值始终保持在内存中
需要注意的是,我们在使用闭包的时候,需要即使清理不再使用的变量,否则可能会导致内存泄漏
确定this指向
1.在全局环境中,this指向全局对象(在浏览器中为window)
2.在函数内部,this的值取决去函数被调用的方式:
2.1函数作为对象的方法被调用,this指向调用这个方法的对象
2.2函数用作构造函数时(使用new关键字),它的this指向创建的构造函数的实例对象
3.在箭头函数中,this指向它被创建时的环境
4.使用call、apply、bind等方法改变this的指向