栈空间和堆空间：数据是如何存储的？

1. JavaScript 是什么类型的语言
   把这种在使用之前就需要确认其变量数据类型的称为静态语言，把在运行过程中需要检查数据类型的语言称为动态语言。
   支持隐式类型转换的语言称为弱类型语言，不支持隐式类型转换的语言称为强类型语言。
   JavaScript 是一种弱类型的、动态的语言。
   JavaScript 的变量是没有数据类型的，值才有数据类型，变量可以随时持有任何类型的数据。

语言类型图

2. JavaScript 的数据类型

   类型	描述
   Boolean	只有 true 和 false 两个值
   Null	只有一个值 null，使用 typeof 检测 Null 类型时，返回的是 Object
   Undefined	一个没有被赋值的变量会有个默认值 undefined，变量提升时的默认值也是 undefined
   Number	基于 IEEE754 标准的双精度64位二进制格式的值，- (263 - 1) 到 (263 - 1)
   BigInt	可以用任意精度表示整数，即使超出 Number 的安全整数范围，也可以安全地存储和操作
   String	用于表示文本数据
   Symbol	符号类型是惟一的且不可修改，常用作 Object 的 key
   Object	对象可以被看做是一组属性的集合

   我们把前面的 7 种数据类型称为原始类型，把最后一个对象类型称为引用类型，之所以把它们区分为两种不同的类型，是因为它们在内存中存放的位置不一样。

3. 内存空间
   在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是代码空间、栈空间和堆空间。

   • 代码空间：存储可执行代码
   • 栈空间和堆空间：原始类型的数据值都是直接保存在“栈”中的，引用类型的值是存放在“堆”中的。

   通常情况下，栈空间都不会设置太大，主要用来存放一些原始类型的小数据。而引用类型的数据占用的空间都比较大，所以这一类数据会被存放到堆中，堆空间很大，能存放很多大的数据，不过缺点是分配内存和回收内存都会占用一定的时间。
   原始类型的赋值会完整复制变量值，而引用类型的赋值是复制引用地址。

引用赋值

4. 闭包的内存模型

   function foo() {
       var myName = "极客时间"
       let test1 = 1
       const test2 = 2
       var innerBar = {
           setName: function (newName) {
               myName = newName
           },
           getName: function () {
               console.log(test1)
               return myName
           }
       }
       return innerBar
   }
   var bar = foo()
   bar.setName("极客邦")
   bar.getName() // 1
   console.log(bar.getName()) // 1 极客邦
   

   • 当 JavaScript 引擎执行到 foo 函数时，首先会编译，并创建一个空执行上下文。
   • 在编译过程中，遇到内部函数 setName，JavaScript 引擎还要对内部函数做一次快速的词法扫描，发现该内部函数引用了 foo 函数中的 myName 变量，由于是内部函数引用了外部函数的变量，所以 JavaScript 引擎判断这是一个闭包，于是在堆空间创建换一个“closure(foo)”的对象（这是一个内部对象，JavaScript 是无法访问的），用来保存 myName 变量。
   • 接着继续扫描到 getName 方法时，发现该函数内部还引用变量 test1，于是 JavaScript 引擎又将 test1 添加到“closure(foo)”对象中。这时候堆中的“closure(foo)”对象中就包含了 myName 和 test1 两个变量了。
   • 由于 test2 并没有被内部函数引用，所以 test2 依然保存在调用栈中。

执行到 foo 函数中“return innerBar”语句时的调用栈状态

产生闭包的核心有两步：第一步是需要预扫描内部函数；第二步是把内部函数引用的外部变量保存到堆中。

垃圾回收：垃圾数据是如何自动回收的？

有些数据被使用之后，可能就不再需要了，我们把这种数据称为垃圾数据。如果这些垃圾数据一直保存在内存中，那么内存会越用越多，所以我们需要对这些垃圾数据进行回收，以释放有限的内存空间。

1. 不同语言的垃圾回收策略
   通常情况下，垃圾数据回收分为手动回收和自动回收两种策略。
   C/C++ 就是使用手动回收策略，何时分配内存、何时销毁内存都是由代码控制的。如果这段数据已经不再需要了，但是又没有主动调用 free 函数来销毁，那么这种情况就被称为内存泄漏。
   另外一种使用的是自动垃圾回收的策略，如 JavaScript、Java、Python 等语言，产生的垃圾数据是由垃圾回收器来释放的，并不需要手动通过代码来释放。

2. 调用栈中的数据是如何回收的
   当一个函数执行结束之后，JavaScript 引擎会通过向下移动 ESP （记录当前执行状态的指针）来销毁该函数保存在栈中的执行上下文。

从栈中回收 showName 执行上下文

3. 堆中的数据是如何回收的
   要回收堆中的垃圾数据，就需要用到 JavaScript 中的垃圾回收器了。

   • 代际假说和分代收集
     代际假说的特点：第一个是大部分对象在内存中存在的时间很短，简单来说，就是很多对象一经分配内存，很快就变得不可访问；第二个是不死的对象，会活得更久。
     在 V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。
     副垃圾回收器，主要负责新生代的垃圾回收（新生区通常只支持 1～8M 的容量）。主垃圾回收器，主要负责老生代的垃圾回收。

   • 垃圾回收器的工作流程
     第一步是标记空间中活动对象和非活动对象。所谓活动对象就是还在使用的对象，非活动对象就是可以进行垃圾回收的对象。
     第二步是回收非活动对象所占据的内存。其实就是在所有的标记完成之后，统一清理内存中所有被标记为可回收的对象。
     第三步是做内存整理。一般来说，频繁回收对象后，内存中就会存在大量不连续空间，我们把这些不连续的内存空间称为内存碎片。当内存中出现了大量的内存碎片之后，如果需要分配较大连续内存的时候，就有可能出现内存不足的情况。

   • 副垃圾回收器
     用 Scavenge 算法来处理。所谓 Scavenge 算法，是把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域。
     新加入的对象都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作。先标记，然后将存活的对象复制到空闲区域中并将其有序排列，完成复制后，对象区域与空闲区域进行角色翻转。为了执行效率，一般新生区的空间会被设置得比较小。JavaScript 引擎采用了对象晋升策略，也就是经过两次垃圾回收依然还存活的对象，会被移动到老生区中。

   • 主垃圾回收器
     老生区中的对象有两个特点，一个是对象占用空间大，另一个是对象存活时间长。采用标记 - 清除（Mark-Sweep）的算法进行垃圾回收。
     首先是标记过程阶段。标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。标记完成后执行垃圾清除（垃圾清理过程就是把没有标记的添加到空闲列表中），不过会产生大量不连续的内存碎片，而碎片过多会导致大对象无法分配到足够的连续内存，于是又产生了另外一种算法——标记 - 整理（Mark-Compact），这个标记过程仍然与标记 - 清除算法里的是一样的，但后续步骤不是直接对可回收对象进行清理，而是让所有存活的对象都向一端移动，然后直接清理掉端边界以外的内存。

4. 全停顿
   由于 JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿（Stop-The-World）。
   为了降低老生代的垃圾回收而造成的卡顿，V8 将标记过程分为一个个的子标记过程，同时让垃圾回收标记和 JavaScript 应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记（Incremental Marking）算法。使用增量标记算法，可以把一个完整的垃圾回收任务拆分为很多小的任务，这些小的任务执行时间比较短，可以穿插在其他的 JavaScript 任务中间执行，解决卡顿问题。

编译器和解释器：V8是如何执行一段JavaScript代码的？

1. 编译器（Compiler）和解释器（Interpreter）
   编译型语言在程序执行之前，需要经过编译器的编译过程，并且编译之后会直接保留机器能读懂的二进制文件，这样每次运行程序时，都可以直接运行该二进制文件，而不需要再次重新编译了。比如 C/C++、GO 等都是编译型语言。
   由解释型语言编写的程序，在每次运行时都需要通过解释器对程序进行动态解释和执行。比如 Python、JavaScript 等都属于解释型语言。

编译器和解释器“翻译”代码

2. V8 是如何执行一段 JavaScript 代码的
   V8 依据 JavaScript 代码生成 AST 和执行上下文，再基于 AST 生成字节码，然后通过解释器执行字节码，通过编译器来优化编译字节码。

   • 生成抽象语法树（AST）和执行上下文
     生成 AST 需要经过两个阶段。
     第一阶段是分词（tokenize），又称为词法分析，其作用是将一行行的源码拆解成一个个 token。所谓token，指的是语法上不可能再分的、最小的单个字符或字符串。
     第二阶段是解析（parse），又称为语法分析，其作用是将上一步生成的 token 数据，根据语法规则转为 AST。如果源码符合语法规则，这一步就会顺利完成。但如果源码存在语法错误，这一步就会终止，并抛出一个“语法错误”。

   • 生成字节码
     字节码是介于 AST 和机器码之间的一种代码。但是与特定类型的机器码无关，字节码需要通过解释器将其转换为机器码后才能执行。
     机器码所占用的空间远远超过了字节码，所以使用字节码可以减少系统的内存使用。

   • 执行代码
     如果有一段第一次执行的字节码，解释器 Ignition 会逐条解释执行。在执行字节码的过程中，如果发现有热点代码（HotSpot，一段代码被重复执行多次，就称为热点代码），那么后台的编译器 TurboFan 就会把该段热点的字节码编译为高效的机器码（即时编译（JIT）），然后当再次执行这段被优化的代码时，只需要执行编译后的机器码就可以了，这样就大大提升了代码的执行效率。

3. JavaScript 的性能优化
   • 提升单次脚本的执行速度，避免 JavaScript 的长任务霸占主线程，这样可以使得页面快速响应交互；
   • 避免大的内联脚本，因为在解析 HTML 的过程中，解析和编译也会占用主线程；
   • 减少 JavaScript 文件的容量，因为更小的文件会提升下载速度，并且占用更低的内存。