JS中变量的存储方式 -- 栈和堆

栈空间和堆空间

JS变量都存储在内存中，而内存给变量开辟了两块存储空间，分别为栈（stack）空间和堆（heap）空间
栈空间：存放JS基本数据类型，通过按值访问，可以直接操作保存在变量中的实际值。
堆空间：存放JS引用数据类型，通过对象的引用访问，不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地
址。

在了解栈和堆之前，我们先来了解一下js中的基本数据类型和引用数据类型

js中的数据类型分成两大类：基本数据类型和引用数据类型。
基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。
常见的基本数据类型：
Number、String 、Boolean、Null和Undefined。
引用类型数据：
就是对象类型 Object type，例如：Object 、Array 、Function 、Data等。（万物皆对象）
不论是何种数据类型都需要有一个地方把数据的内容保存下来，在我们给变量赋值的过程中，就是在做保存的过程。

栈空间（stack）

示例

let num1 = 1
let num2 = num1
num2 = 2
console.log(num1,num2) // 1,2 变量num1的值并没有因为变量num2值的改变而改变（互不影响）

流程图

当把数值1赋值给变量num1时，num1就在栈空间中占用了一份存储空间，把数值1存放到此空间中。
当把num1赋值给num2时，num2在栈空间中占用了新的一份存储空间，把数值1存放到此空间中。
当num2又被赋值为数值2时，将原来存储的数值1在内存中释放，把数值2存放到此空间中。

小结

1. 声明一个变量，多次赋值时（赋值的内容都应为基本数据类型）就会取最后一个值
2. 可以直接给变量赋值另一个变量,赋值之后的变量和原变量没有联系，类似于将内容存储在另一个新的空间（变量中存储的内容应为基本数据类型）

堆空间（heap）

示例

let obj1 = {
    name: 'zs',
    age: 20
}
let obj2 = obj1
obj2.age = 22
console.log(obj1.age,obj2.age) // 22,22 对象obj1中的age值因对象obj2的age值的改变而改变

流程图

当把对象赋值给变量obj1时，obj1就在堆空间中占用了一份存储空间，把对象存放到此空间中，把引用地址存放到栈空间中。
当把obj1赋值给obj2时，obj2在栈空间中占用了新的一份存储空间，把相同的引用地址存放到此空间中，指向相同的堆空间的数据。
当obj2里面的age属性值被重新赋值时，也就影响到obj1中的age属性值。

小结
将一个变量（存储的为引用类型数据）直接赋值给另一个变量以后相互之间的修改会互相影响对方，进而引出浅拷贝与深拷贝的问题。（以上示例中的obj1赋值给obj2为简单的浅拷贝）

当引用数据类型只有一层且需要深拷贝时，有一个特别简单的方式，使用扩展运算符...
示例代码

let obj1 = {
    name: 'zs',
    age: 20
}
let obj2 = {...obj1}
obj2.age = 22
console.log(obj1.age,obj2.age) // 20,22 
/* 此时的obj2相当于在堆空间新开辟了一块内存把与obj1相同的数据值存储起来，并把这个新的引用地址保存在了一个全新的栈空间中，obj1与obj2互不影响 */