深入JavaScript运行原理

喜欢ヅ旅行 2023-10-02 19:53 3阅读 0赞

#### 文章目录 ####

*   *  1. 深入V8引擎原理
     *   *  1.1 JavaScript代码的执行
         *  1.2 V8引擎的执行原理
         *  1.3 V8引擎的架构
         *  1.4 V8引擎的解析图（官方）
     *  2.深入JS代码执行原理
     *   *  2.1 版本说明
         *  2.2 全局代码执行过程
         *   *  2.2.1 初始化全局对象
             *  2.2.2 执行上下文
             *  2.2.3 认识VO对象
             *  2.2.4 执行过程
         *  2.3 函数代码执行过程
     *  3.作用域和作用域链

### 1. 深入V8引擎原理 ###

#### 1.1 JavaScript代码的执行 ####

**JavaScript代码下载好之后，是如何一步步被执行的呢？**

**我们知道，浏览器内核是由两部分组成的，以webkit为例：**

*  **WebCore(渲染引擎)**：负责HTML解析、布局、渲染等等相关的工作；
 *  **JavaScriptCore(JS引擎)**：解析、执行JavaScript代码；
    
    ![在这里插入图片描述][2c9d1a4c7a5844c8aa15219e6b8b1706.png_pic_center]

**另外一个强大的JavaScript引擎就是V8引擎。**

#### 1.2 V8引擎的执行原理 ####

**我们来看一下官方对V8引擎的定义：**

*  V8是用**C++编写**的Google开源**高性能JavaScript和WebAssembly引擎**，它用于**Chrome和Node.js**等。
 *  它实现**ECMAScript**和**WebAssembly**，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32，ARM或MIPS处理  
    器的Linux系统上运行。
 *  **V8可以独立运行，也可以嵌入到任何C ++应用程序中。**

![在这里插入图片描述][f7f0aa85628b4e608a66ab0d1d2a0e86.png_pic_center]

**接下来会对这幅图进行解析**

#### 1.3 V8引擎的架构 ####

V8引擎本身的**源码非常复杂**，大概有**超过100w行C++代码**，通过**了解它的架构**，我们可以知道它是如何对JavaScript执行的：

1.  **Parse模块**会将JavaScript代码转换成**AST（抽象语法树）**，这是**因为解释器并不直接认识JavaScript代码**；
    
     *  如果**函数没有被调用**，那么是**不会被转换成AST**的；
     *  Parse的V8官方文档：https://v8.dev/blog/scanner
2.  **Ignition**是一个**解释器**，会将**AST转换成ByteCode（字节码）**
    
     *  同时**会收集TurboFan优化所需要的信息**（比如函数参数的类型信息，有了类型才能进行真实的运算）；
     *  如果函数只调用一次，Ignition会解释执行ByteCode；
     *  Ignition的V8官方文档：https://v8.dev/blog/ignition-interpreter
3.  **TurboFan**是一个**编译器**，可以**将字节码编译为CPU可以直接执行的机器码**；
    
     *  如果一个函数被多次调用，那么就会被标记为**热点函数**，那么就会经过**TurboFan转换成优化的机器码，提高代码的执行性能**；
     *  但是，**机器码实际上也会被还原为ByteCode**，这是因为如果后续执行函数的过程中，**类型发生了变化（比如sum函数原来执**  
        **行的是number类型，后来执行变成了string类型）**，之前**优化的机器码并不能正确的处理运算**，**就会逆向的转换成字节码**；
     *  TurboFan的V8官方文档：https://v8.dev/blog/turbofan-jit
4.  **V8引擎有四个重要模块**, 除了以上三个模块外还有**第四个模块垃圾回收器**, 后续会重点讲到

#### 1.4 V8引擎的解析图（官方） ####

![在这里插入图片描述][4b363babd4814f52ab4c8933779acdcc.png_pic_center]

**词法分析**（英文lexical analysis）

*  将字符序列转换成token序列的过程。
 *  token是**记号化**（tokenization）的缩写
 *  **词法分析器**（lexical analyzer，简称lexer），也叫**扫描器**（scanner）

**语法分析**（英语：syntactic analysis，也叫 parsing）

*  **语法分析器也可以称之为parser。**

### 2.深入JS代码执行原理 ###

#### 2.1 版本说明 ####

**在ECMA早期的版本中（ECMAScript3），代码的执行流程的术语和ECMAScript5以及之后的术语会有所区别：**

*  目前网上大多数流行的说法都是**基于ECMAScript3版本的解析**，并且在**面试时**问到的大多数都是ECMAScript3的版本内容。
 *  但是ECMAScript3终将过去， **ECMAScript5必然会成为主流**，所以最好也理解ECMAScript5甚至包括ECMAScript6以及更  
    好版本的内容；
 *  事实上在TC39(可以看成ECMA的未来版本)的最新描述中，和ECMAScript5之后的版本又出现了一定的差异；

**那么我们按照如下顺序学习：**

*  通过ECMAScript3中的概念学习**JavaScript执行原理、作用域、作用域链、闭包等概念**；
 *  通过ECMAScript5中的概念学习**块级作用域、let、const等概念**；

**事实上，它们只是在对某些概念上的描述不太一样，在整体思路上都是一致的。**

#### 2.2 全局代码执行过程 ####

##### 2.2.1 初始化全局对象 #####

js引擎会在**执行代码之前**，会在**堆内存中创建一个全局对象**(在浏览器中也就是window)：**Global Object（GO）**

*  该对象\*\*所有的作用域（scope）\*\*都可以访问；
 *  里面会包含**Date、Array、String、Number、setTimeout、setInterval等等；**
 *  其中还有一个**window属性**指向自己；

##### 2.2.2 执行上下文 #####

js引擎内部有一个**执行上下文栈(栈内存)**（Execution Context Stack，**简称ECS**），它是用于执行**代码的调用栈**。

那么现在它要执行谁呢？执行的是**全局的代码块**：

*  全局的代码块为了执行会构建一个**全局执行上下文（Global Execution Context 简称GEC）**；
 *  GEC会**被放入到ECS中**执行；

**GEC被放入到ECS中里面包含两部分内容：**

*  **第一部分**：在代码执行前，在**parser转成AST的过程中**，会将**全局定义的变量、函数**等加入到**Global Object**中，但是并**不会**  
    **赋值**；
    
     *  这个过程也称之为**变量的作用域提升**（hoisting）
 *  **第二部分**：在代码执行中，对变量赋值，或者执行其他的函数；

##### 2.2.3 认识VO对象 #####

每一个执行上下文会关联一个**VO（Variable Object，变量对象），变量和函数声明**会被添加到这个VO对象中。

*  如果是一个函数, **函数的参数也会添加到VO对象中**

当**全局代码被执行的时候**，**VO就是GO对象了**

*  **全局执行上下文使用全局对象(GO)来作为VO**
 *  **全局执行上下文中的this指向GO(window)**

##### 2.2.4 执行过程 #####

**示例代码**

假如我们有下面一段代码，它在JavaScript中是如何被执行的呢？

var message = "Global Message";
    function foo() {
        
      var message = "Foo Message";
      console.log(message);
    }
    
    var num1 = 10;
    var num2 = 20;
    var result = num1 + num2;
    
    console.log(result);
    
    foo();

**全局代码执行过程（执行前）**

*  **会定义变量, 但不会赋值**

![在这里插入图片描述][001c214c5e0a490ca2eca9e3ed57ab86.png_pic_center]

**全局代码执行过程（执行后）**

*  **将变量进行赋值**

![在这里插入图片描述][b9319c5c500842bb980b466ed96cbb08.png_pic_center]

#### 2.3 函数代码执行过程 ####

在执行的过程中**执行到一个函数时**，就会根据**函数体**创建一个**函数执行上下文**（Functional Execution Context，**简称FEC**），并且压入到**EC Stack**中。

**因为每个执行上下文都会关联一个VO，那么函数执行上下文关联的VO是什么呢？**

*  **当进入一个函数执行上下文时**，会创建一个**AO对象**（Activation Object）；
 *  这个AO对象会**使用arguments作为初始化**，并且**初始值是传入的参数**；
 *  这个**AO对象会作为执行上下文的VO来存放变量的初始化**；

**示例代码**

var message = "Global Message";
    function foo(num) {
        
      var message = "Foo Message";
      var age = 18;
      var height = 1.88
      console.log(message);
    }
    
    var num1 = 10;
    var num2 = 20;
    var result = num1 + num2;
    
    console.log(result);
    
    foo(123);

**执行过程**

![在这里插入图片描述][a00a476ccafe49e9a5fb80a31f2f750e.png_pic_center]

### 3.作用域和作用域链 ###

当进入到一个执行上下文时，执行上下文也会关联一个作用域链（Scope Chain）

*  **作用域链是一个对象列表**，用于变量标识符的求值；
 *  当进入一个执行上下文时，这个**作用域链被创建，并且根据代码类型，添加一系列的对象**；
 *  函数作用域链, **在函数创建的那一刻起, 就已经确定了作用域链**
 *  **作用域链中会保存上层作用域的VO对象**, 如果有多层嵌套, 作用域链会保存到全局上下文中VO对应的GO
    
        var message = "Global Message";
        
        function foo() {
              
          console.log(message); // Global Message
        }
        
        var obj = {
              
          name: "obj",
          bar: function () {
              
            var message = "Bar Message";
            foo();
          },
        };
        
        obj.bar();
 *  函数的作用域链**与他调用的位置无关**, 是在他创建的那一刻, **由他创建的位置决定了的**, 例如上述代码中, 函数创建的位置的上层作用域就是全局, 因为foo函数的作用域链就会保存上一层作用域的VO, 因此**作用域链保存的是GO**
 *  在全局上下文还没有执行, 解析的时候, 就创建了foo函数, foo函数有自己VO对应的AO, 当查找message变量时, 会**先在自己的AO中查找**, 如果查找不到, 就会**去作用域链中查找**, 作用域链中保存的是全局上下文的VO对应的GO, 因此就会去GO中查找  
    例如上述代码中, 函数创建的位置的上层作用域就是全局, 因为foo函数的作用域链就会保存上一层作用域的VO, 因此**作用域链保存的是GO**
 *  在全局上下文还没有执行, 解析的时候, 就创建了foo函数, foo函数有自己VO对应的AO, 当查找message变量时, 会**先在自己的AO中查找**, 如果查找不到, 就会**去作用域链中查找**, 作用域链中保存的是全局上下文的VO对应的GO, 因此就会去GO中查找

[2c9d1a4c7a5844c8aa15219e6b8b1706.png_pic_center]: https://img-blog.csdnimg.cn/2c9d1a4c7a5844c8aa15219e6b8b1706.png#pic_center
[f7f0aa85628b4e608a66ab0d1d2a0e86.png_pic_center]: https://img-blog.csdnimg.cn/f7f0aa85628b4e608a66ab0d1d2a0e86.png#pic_center
[4b363babd4814f52ab4c8933779acdcc.png_pic_center]: https://img-blog.csdnimg.cn/4b363babd4814f52ab4c8933779acdcc.png#pic_center
[001c214c5e0a490ca2eca9e3ed57ab86.png_pic_center]: https://img-blog.csdnimg.cn/001c214c5e0a490ca2eca9e3ed57ab86.png#pic_center
[b9319c5c500842bb980b466ed96cbb08.png_pic_center]: https://img-blog.csdnimg.cn/b9319c5c500842bb980b466ed96cbb08.png#pic_center
[a00a476ccafe49e9a5fb80a31f2f750e.png_pic_center]: https://img-blog.csdnimg.cn/a00a476ccafe49e9a5fb80a31f2f750e.png#pic_center