深浅拷贝知多少？

导语 日常工作开发中，赋值、拷贝是每天都在做的事情，可是有一些拷贝的改变会同时改变原有元素的内容，本次分享主要从拷贝前和拷贝后的数据对比来进行交流探讨～

背景

如上，一个简单的赋值和修改，引起了原有元素内容的改变。这种情况是否也会在你的项目中出现？如果没出现的，我来分享下，避免后续再有此情况发生。下面就 针对在什么情况下赋值会改变原有对象的值进行进一步说明。首先带你了解下数据类型和基础概念。

 JS数据类型

JS数据类型分为：基本数据类型和对象数据类型。

基本数据类型：直接存储在栈(stack)中的数据。（如string，number，boolean，null，undefined，symbol等）

对象数据类型：存储的是该对象在堆中引用，真实的数据存放在堆内存里。（主要是包括数组对象和object对象） 如下图所示：

 基础概念

浅拷贝

概念：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

深拷贝

概念：会另外创造一个一模一样的对象，新对象跟原对象不共享内存

赋值

赋值赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

实现方式

浅拷贝的实现方式 

以上了解了数据类型的存储和拷贝的基础概念，来具体看一下哪一些情况，赋值、拷贝是可以完全独立存在的，哪一些情况是会改变到原有对象的内容的。请看：按照浅拷贝的基础概念，写了一个shallowCopy的方法，并且拷贝后同样改变原数据中的元素，如下：

所得到的结果是：

总结：name是基础数据类型，status所在的是对象数据类型，浅拷贝的概念是只按位拷贝一层，所以基础数据类型是直接得到的真实数据，而对象数据类型得到的是其真实数据的地址引用，所以myinfo和bindinfo中的param所指向的存储空间是同一个。

浅拷贝现有方法（使用时请注意）

Object.assign()Array.prototype.concat()Array.prototype.slice()

举例：

深拷贝的实现方式

按照深拷贝的基础概念，同样写了一个deepCopy的方法，并且拷贝后同样改变原数据中的元素，如下：

所得到的结果是：

总结：name是基础数据类型，自然不用说，status是对象数据类型，由于深拷贝是层层递进拷贝，并不只是一层，所以拷贝后的新对象和原对象是完全独立的，无论哪个改变，也不会改变另外一个对象的内容。所以深拷贝之后，改变新对象的status并未改变原有对象的值。

深拷贝现有方法

JSON.parse(JSON.stringify())  Lodash库中的_.cloneDeep$.extend

举例：

特殊情况

js总是会有一些特殊情况，所以开发时要更加谨慎，深拷贝也并不是能拷贝所有的类型，例如下面的symbol，因为它是特殊的！

总结：通过上面的例子可以看到，symbol是一种特殊的数据类型，它的深拷贝也是浅拷贝，所以要格外小心～

总结

赋值：两个指向同一个对象，无论哪个改变，另外一个都会跟着改变。

浅拷贝：虽然不是同一对象，但是如果原数据都是基础数据类型，浅拷贝就是深拷贝，各自独立，否则如果有对象数据类型，就会出现联动现象。

深拷贝：不是同一对象，原数据和新数据是相互独立，互不影响的，但要注意symbol类型。