JavaScript引擎如何执行JavaScript代码？

顽固_倔强
95 阅读6分钟

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

必须了解一些概念

执行环境、词法环境、作用域、执行上下文、闭包等，这些概念看起来都差不多，却好像又不大容易区分清楚，它们分别都在描述什么呢？

JavaScript代码运行的各个阶段

JavaScript 是弱类型语言，在运行时才能确定变量类型。即使是如今流行的 TypeScript，也只是增加了编译时（编译成 JavaScript）的类型检测。

执行过程

从上到下进行词法分析、语法分析、语义分析等处理，并在代码解析完成后生成 AST（抽象语法树） ，最终根据 AST 生成 CPU 可以执行的机器码并执行。这个过程描述为语法分析阶段。

V8 引擎中 JavaScript 代码的运行过程主要分成三个阶段：

  1. 语法分析阶段。 该阶段会对代码进行语法分析，检查是否有语法错误（SyntaxError），如果发现语法错误，会在控制台抛出异常并终止执行。
  2. 编译阶段。 该阶段会进行执行上下文（Execution Context）的创建，包括创建变量对象、建立作用域链、确定 this 的指向等。每进入一个不同的运行环境时，V8 引擎都会创建一个新的执行上下文。
  3. 执行阶段。 将编译阶段中创建的执行上下文压入调用栈，并成为正在运行的执行上下文，代码执行结束后，将其弹出调用栈。

最重要的编译阶段

编译阶段的核心便是执行上下文的创建。

执行上下文的创建

执行上下文的创建离不开 JavaScript 的运行环境，JavaScript 运行环境包括全局环境、函数环境和eval，其中全局环境和函数环境的创建过程如下：

  1. 第一次载入 JavaScript 代码时，首先会创建一个全局环境。全局环境位于最外层，直到应用程序退出后（例如关闭浏览器和网页）才会被销毁。
  2. 每个函数都有自己的运行环境，当函数被调用时，则会进入该函数的运行环境。当该环境中的代码被全部执行完毕后，该环境会被销毁。不同的函数运行环境不一样，即使是同一个函数，在被多次调用时也会创建多个不同的函数环境。

在不同的运行环境中，变量和函数可访问的其他数据范围不同，环境的行为（比如创建和销毁）也有所区别。而每进入一个不同的运行环境时，JavaScript 都会创建一个新的执行上下文，该过程包括：

  • 建立作用域链（Scope Chain）；
  • 创建变量对象（Variable Object，简称 VO）；
  • 确定 this 的指向。

创建变量对象

每个执行上下文都会有一个关联的变量对象，该对象上会保存这个上下文中定义的所有变量和函数。

在浏览器中，全局环境的变量对象是window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的。相应的，在 Node 中全局环境的变量对象则是global对象。

创建变量对象的过程：创建arguments对象（仅函数环境下），同时会检查当前上下文的函数声明和变量声明。

  • 对于变量声明：此时会给变量分配内存，并将其初始化为undefined（该过程只进行定义声明，执行阶段才执行赋值语句）。
  • 对于函数声明：此时会在内存里创建函数对象，并且直接初始化为该函数对象。

该过程会发生变量提升，函数优先。es6后引入了块作用域。

JavaScript 采用的是词法作用域（Lexical Scoping），也就是静态作用域。词法作用域中的变量，在编译过程中会产生一个确定的作用域。

词法环境又分为词法环境（Lexical Environment）和变量环境（Variable Environment）两种：

  • 变量环境用来记录var/function等变量声明；
  • 词法环境是用来记录let/const/class等变量声明。

创建变量过程中会进行函数提升和变量提升，JavaScript 会通过词法环境来记录函数和变量声明。通过使用两个词法环境（而不是一个）分别记录不同的变量声明内容，JavaScript 实现了支持块级作用域的同时，不影响原有的变量声明和函数声明。

建立作用域链

就是将各个作用域通过某种方式连接在一起。

作用域就是词法环境，而词法环境由两个成员组成：

  • 环境记录（Environment Record）：用于记录自身词法环境中的变量对象。
  • 外部词法环境引用（Outer Lexical Environment）：记录外层词法环境的引用。
function foo() {
  console.dir(bar);
  var a = 1;
  function bar() {
    a = 2;
  }
}

console.dir(foo);
foo();


foo[[scope]] = [globalContext];
bar[[scope]] = [fooContext, globalContext];

可以看到：

  • foo的[[scope]]属性包含了全局[[scope]]
  • bar的[[scope]]将会包含全局[[scope]]和foo的[[scope]]

重点：JavaScript 会通过外部词法环境引用来创建变量对象的一个作用域链，从而保证对执行环境有权访问的变量和函数的有序访问。

VO和AO

编译阶段会进行变量对象（VO）的创建，该过程会进行函数声明和变量声明，这时候变量的值被初始化为 undefined。在代码进入执行阶段之后，JavaScript 会对变量进行赋值，此时变量对象会转为活动对象（Active Object，简称 AO），转换后的活动对象才可被访问，这就是 VO -> AO 的过程。

VO -> AO 过程。

  • 在定义期（编译阶段）：该对象值仍为undefined，且处于不可访问的状态。
  • 进入执行期（执行阶段）：VO 被激活，其中变量属性会进行赋值。

实际上在执行的时候，除了 VO 被激活，活动对象还会添加函数执行时传入的参数和arguments这个特殊对象，因此 AO 和 VO 的关系可以用以下关系来表达：AO = VO + function parameters + arguments

函数执行过程中变量的解析：

  • 从当前词法环境开始，沿着作用域链逐级向外层寻找环境记录，直到找到同名变量为止；
  • 找到后不再继续遍历，找不到就报错。

闭包使得我们可以从外部读取局部变量，在大多数项目中都会被使用到，常见的用途包括：

  • 用于从外部读取其他函数内部变量的函数；
  • 可以使用闭包来模拟私有方法；
  • 让这些变量的值始终保持在内存中。
avatar
文章
阅读
粉丝