以大家开发常用的 Chrome 浏览器或 Node 举例，我们的 JavaScript 代码是通过 V8 运行的。但 V8 是怎么执行代码的呢？当我们输入 const foo = {foo:'foo'} 时 V8 又做了什么？笔者先抛出以上问题，我们接着往下看。

在代码运行时，最重要的前提便是有一个能够存储状态的地方，这便是我们所述的堆栈空间。

我们的基础类型是保存在栈中的，会自动进行回收；而复合类型是保存在堆中的，通过GC操作进行空间释放。这一过程对于用户来说是隐式的，因此用户必须按照 JavaScript 的规范来写代码，如果没有符合规范，那 GC 就无法正确的回收空间，因此会造成 ML 现象，更严重的就会造成 OOM。

为了更直观的看清每一种类型在内存中的存储形式，笔者创建了一个基础类型变量 Foo，复合类型 Bar，以及一个声明 John，并给出它们在内存堆栈中的状态图：

1、关于 GC

通过上述分析，我们提到了 GC 会对无效对象进行回收以及空间释放，对于用户而言，不管是基础类型还是复合类型他们的声明与释放都是自动的。但实际上关于堆的回收是手动的，只是在 V8 层面已经帮我们实现了而已，并且这一过程也不是完全免费的（write barrier）。但这一自动的过程让很大部分开发人可以完全忽视它的存在，显然 JavaScript 是故意设计如此

write barrier 用于在异步三色标记算法进行中通知 GC 目前对象图变更的所有操作，以保证三色标记法在异步过程中的准确性, v8 插入的 write barrier 代码。

2、JavaScript 的定位

1）关于 CPU

• 初始化“堆空间”、“栈空间”

• 初始化全局上下文环境，包括执行过程中的全局信息，变量等

• 初始化全局作用域。而函数作用域以及其他子作用域是执行时才存在的

• 初始化事件循环系统

1、字节码

由于 JavaScript 字节码目前并没有和 JVM 或 ESTree 那样标准化，因此其格式会与 V8 引擎版本紧密相关。

2、看懂一段字节码

很多的字节码都满足以下正则 /^(Lda|Sta).+$/ 它们当中的 a 代指累加器 (accumulator)，主要用于描述把值操作到累加器寄存器中，或把当前在累加器中的值取出并存储在寄存器中。因此可以把解释器理解成是带有累加器的寄存器

3、字节码的运用

4、即时编译的解释执行与编译执行

• 原始类型：原始类型主要包括：null、undefined、boolean、number、string、bigint、symbol，以类似栈数据结构存储，遵循先进后出的原则，而且具有 immutable 特点，比如我们修改了 string 的值，V8 会返回给我们一个全新的 string。

• 对象类型：JavaScript 是建立在对象之上的语言，所以对象的属性值自然也可以是另一个对象。

• 函数类型：如果函数作为对象的属性，我们一般称其为方法。

1、Function

在 ES6 出现模块作用域之前，JavaScript 中没有私有作用域的概念，因此在多人开发项目的时候，常常会使用单例模式，以 IIFE 的模式创建一个 namespace 以减少全局变量命名冲突的问题。因此 IIFE 最大的特点是执行不会污染环境，函数和函数内部的变量都不会被其他部分的代码访问到，外部只能获取到 IIFE 的返回结果。

• name 属性造就被浏览器广泛支持，但是直到 ES6 才将其写入标准，ES6 之前的 name 属性之所以可以获取到函数名称，是因为 V8 对外暴露了相应的接口。Function 构造函数返回的函数实例，name 属性的值为 anonymous

  
  

• code 属性表示的是函数编码，以 string 的形式存储在内存中。当执行到一个函数调用语句时，V8 会从函数对象中取出 code 属性值，然后解释执行这段函数代码。V8 没有对外暴露 code 属性，因此无法直接输出。

2、About JavaScript

3、Object Storage

• key 为数字的属性被优先打印，并升序排列。

• key 为字符串的属性按照被定义时的顺序进行排列。

• 对象内 key 为数字的属性称为 elements（排序属性），此类属性通过浪费空间换取时间，直接下标访问，提升访问速度。当 element 的序号十分不连续时，会优化成为 hash 表。

• 对象内 key 为字符串的属性称为 properties（常规属性），通过把对象的属性和值分成线性数据结构和属性字典结构后，以优化原本的完全字典存储。properties 属性默认采用链表结构，当数据量很小时，查找也会很快，但数据量上升到某个数值后，会优化成为 hash 表。上述对象在内存中存储如图所示：

4、对象内属性

对象内属性是可以动态扩充的。The number of in-object properties is predetermined by the initial size of the object。但笔者目前没有见到对象内属性通过动态扩容大于 10 个的情况。

1）编译器优化

2）关于 proto

在维基百科中，类型系统是这样定义的：在计算机科学中，类型系统（type system）用于定义如何将编程语言中的数值和表达式归类为许多不同的类型，如何操作这些类型，这些类型如何互相作用。类型可以确认一个值或者一组值具有特定的意义和目的（虽然某些类型，如抽象类型和函数类型，在程序运行中，可能不表示为值）。类型系统在各种语言之间有非常大的不同，也许，最主要的差异存在于编译时期的语法，以及运行时期的操作实现方式。

1、类型系统基本转换

• 如果 object 为基本类型，直接返回结果

• 否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。

• 否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。

• 否则，JavaScript 抛出一个 TypeError 异常。

• 如果 object 为基本类型，直接返回结果

• 否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。

• 否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。

• 否则，JavaScript 抛出一个 TypeError 异常。

利用 V8 深入理解 JavaScript，这个标题可能起的有点狂，但对于笔者来说通过对此学习确实更进一步理解了 JavaScript 甚至其他语言的工作机制，同时对前端和技术栈等概念有了更深层次的思考。

本文主要通过日常简单的代码存储引出V8相关以及计算机科学的一些概念，从JavaScript 的定位推导出当前设计的原因，以及结合 V8 工作流程给出一个宏观的认识；接着通过详细的步骤完整的展现了 V8 编译流水线每个环节的产物；通过分析 JavaScript 对象引出其存储规则；最后通过类型系统引出 V8 对不同类型数据进行交互的规则实现。

对于 V8 庞大而复杂的执行结构来说本文只阐述了凤毛麟角，文中有太多的话题可以用来延伸引出更多值得研究的学问，希望同学们通过本文可以有所收获和思考，如果文中有错误欢迎在评论区指出。

参考资料

• Concurrent marking in V8
• How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code
• 维基百科-类型系统
• ECMAScript® 2015 Language Specification
• ECMAScript
• Understanding V8’s Bytecode
• 用字节码包含 node.js 源码之原理篇