全面分析总结JS内存模型

前言

最近在整体复习一遍现代前端必备的核心知识点，将会整理成一个前端分析总结文章系列。这篇是其中的第二篇，主要是总结下JS底层的内存模型。（另外，此系列文章也可以在语雀专栏——硬核前端系列查看）。

本文首发自迪诺笔记，转载请注明出处😁

一、数据类型与内存

数据类型分类

主要分为两大类：基本数据类型、复杂数据类型，详细分类如下。

数据类型
基本数据类型	String、Number、Boolean、Null、Undefined、Symbol
复杂数据类型	Object以及所有继承自Object的类型

对于不同的数据类型有不同的内存区域存储数据，基本数据类型直接存储在栈内存，复杂数据类型存储在堆内存。

内存分类

JS中的内存分类与JS引擎有关，在浏览中一般是V8引擎；要进行内存区分主要是为了进行垃圾回收，比如在V8的垃圾回收机制中会根据新生代、老生代内存采用不同回收算法来保证垃圾回收效率。

JS内存空间分为栈（stack）内存和堆（heap）内存，栈内存是栈结构存储基本数据类型和指向堆内存的指针，堆内存存储复杂数据类型。

二、变量声明与赋值

核心点总结

• 变量声明的本质是变量名与栈内存地址进行绑定，不直接与堆内存进行绑定。

• 声明的基本数据类型会将值存储在栈内存中，声明的复杂数据类型会将值存储在堆内存中并将其在堆中的内存地址作为值存到栈内存中。

• const声明常量本质是指的是声明的变量名所指向的栈内存地址不可改变，但是栈中对应的值可以改变。

• 基本数据类型赋值是在栈内存中申请新的内存区域保存值并将其指向的内存地址绑定到原有变量上。

• 复杂数据类型赋值是在堆内存中申请新的内存区域保存值并将其指向的内存地址作为值在栈内存中申请新的内存区域保存将其在栈中的内存地址绑定到变量上。

详解变量声明与赋值

基本数据类型

let index = 23

基础数据类型直接将值存储在栈内存中，变量绑定到值在栈中对应的地址。

let _index = index

声明另一个变量_index并赋值为index，其实是将_index和index变量绑定到index指向的内存地址。

index = 45

修改变量index的值为基本数据类型，其实是在栈内存中分配内存存储值然后将得到的内存地址绑定到变量index。

图中的Memory指的是栈内存，与下面图中的Stack相同

复杂数据类型

let students = []

复杂数据类型在声明时是在堆内存上分配内存空间存储其值，将分配的堆内存空间地址作为值存储在栈内存上，变量直接绑定的是栈上内存地址。

通过引用来修改复杂数据

let _students = students
_student