Javascript 深拷贝的前因后果（深层理解）

---

前言

关于 JS 的深拷贝，相信不少同学都有所耳闻或者了解吧，那为什么会有深拷贝？深拷贝解决了什么问题？深拷贝的实现逻辑是什么?作为前端面试的高频考点，今天这篇文章就带大家吃透深拷贝，搞懂它的前因后果

---

前因—浅拷贝

在讲浅拷贝之前，先来了解一下什么是值类型和引用类型，会的同学就当复习一波~

值类型和引用类型

什么是值类型和引用类型？一个例子教大家看懂：
值类型：

这个大家应该都能理解，比较直观的逻辑，打印的b结果为100。看下面逻辑图加深印象

值类型都是通过栈进行存储的：

• 第一步：把a赋值成100
• 第二步：把b赋值为a，也是等于100
• 第三步，把a赋值为100，a和b互不影响，b的值仍未100

引用类型：

a赋值成一个对象age：20，b赋值为a，b.age赋值为21，最后打印a.age的值也为21。看下面逻辑图加深印象：

这里除了上面的栈，还引入了一个新的概念堆。在计算机的存储中，栈从上往下排列，堆从下往上排列，一般不会重合。来看一下上面例子的存储过程：

• 第一步：给age赋值成一个等于20的对象，他的key会给一个内存地址一，此时变量a指向的是一个内存地址1，也就是说a里面存储的并不是这个对象，而是存入了内存地址指向这个对象