首先了解下传统意义上的堆和栈

image.png

什么是堆？

可以把堆认为是一个很大的内存存储空间，你可以在里面存储任何类型数据。但是这个空间是私有的，操作系统不会管在里面存储了什么，也不会主动的去清理里面的内容，因此在C语言中需要程序员手动进行内存管理，以免出现内存泄漏，进而影响性能。

什么是栈？

栈是内存中一块用于存储局部变量和函数参数的线性结构，遵循着先进后出的原则。数据只能顺序的入栈，顺序的出栈。当然，栈只是内存中一片连续区域一种形式化的描述，数据入栈和出栈的操作仅仅是栈指针在内存地址上的上下移动而已。

JS中数据在堆栈中的存储

原始类型（String，Number，Boolean，Null，Undefined，BigInt）

数据本身是存在栈内，例：

function () {
  let foo = 1;
  let bar = 2;
}

上面例子的栈的图示如下：

image.png

对象类型(Function，Array，Object)

在栈中存的只是一个堆内地址的引用，例：

function () {
  let foo = 1;
  let bar = 2;
  let obj = {
    a: 1,
    b: 2,
  }
}

上面例子的堆栈的图示如下：

image.png

function生命周期结束后栈会从上到下出栈释放内存，堆中的内存也会被自动回收，这里堆的内存并不需要我们去手动回收。