浅拷贝与深拷贝的区别（详解）

小咪咪 2022-12-25 08:53 162阅读 0赞

# [浅拷贝与深拷贝的区别][Link 1] #

[html][]

浅拷贝与深拷贝

### 一、数据类型 ###

数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。

基本数据类型的特点：直接存储在栈(stack)中的数据  
引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

### ![图片描述][20b664e29d81a4d12207dd795be540fb.png]   二、浅拷贝与深拷贝 ###

> 为什么要使用深拷贝？
> 
> 我们希望在改变新的数组（对象）的时候，不改变原数组（对象）

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  
深拷贝和浅拷贝的示意图大致如下：  
![图片描述][6c073cff2875a4277054bf0d4f363548.png]

> 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存（分支）。
> 
> 1.  浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。
> 2.  如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。
> 3.  ![format_png][]
>     
>

> 深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象，是“值”而不是“引用”（不是分支）
> 
> 1.  拷贝第一层级的对象属性或数组元素
> 2.  递归拷贝所有层级的对象属性和数组元素
> 3.  深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。
> 4.  ![format_png 1][]
>     
>

###    三、赋值和浅拷贝的区别 ###

当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。  
浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。

我们先来看两个例子，对比赋值与浅拷贝会对原对象带来哪些改变？  
![图片描述][2691aabb18cadf0dffdfda76ec19b3c3.png]  
![图片描述][bf2cdc70f3ac6912b6365f3fa7b70072.png]  
![图片描述][45072497b5c751c047b449df35c87704.png]  
![图片描述][27e47e72d28a0e0c3fb07e114ca04f3d.png]  
  
上面例子中，obj1是原始数据，obj2是赋值操作得到，而obj3浅拷贝得到。我们可以很清晰看到对原始数据的影响，具体请看下表：  
![图片描述][5231d393de15172f3e4c7cb38646eafa.png]  
四、浅拷贝的实现方式  
1.Object.assign()  
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。  
![图片描述][131d19ae964c3280c2c3544fd4b87237.png]  
注意：当object只有一层的时候，是深拷贝  
![图片描述][bce99aee6941c13178e36ec9f174680b.png]  
2.Array.prototype.concat()  
![图片描述][dfc5578dc1abbc410653f6ac81e74bcb.png]  
修改新对象会改到原对象:  
![图片描述][db15f7682d720fe98101320dbaeb4c08.png]  
3.Array.prototype.slice()  
![图片描述][1ffe4a6e2b80482b93514b355be5fb45.png]

同样修改新对象会改到原对象：  
![图片描述][db15f7682d720fe98101320dbaeb4c08.png]  
  
关于Array的slice和concat方法的补充说明：Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。

原数组的元素会按照下述规则拷贝：

如果该元素是个对象引用(不是实际的对象)，slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。  
对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

可能这段话晦涩难懂，我们举个例子，将上面的例子小作修改：  
![图片描述][cbb63c073b4a7fcc80d554dd9eb1db3f.png]  
![图片描述][61a1fa8639ee0c0b747985a1ddf78594.png]  
五、深拷贝的实现方式

1.  JSON.parse(JSON.stringify())

![图片描述][f33489b18858385ab30ea400e3ee3835.png]  
![图片描述][f670d5da328374baa4d662e71f515acd.png]  
原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数  
![图片描述][f6c720c98f48b321e926f0fdf86f7aaf.png]  
![图片描述][64b5ca449b2bc91c9757d8e31c9214ec.png]  
这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数

1.  **手写递归方法**

递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝  
![图片描述][f67d1f52a73f2b2a38af765cd5840792.png]

1.  函数库lodash

该函数库也有提供\_.cloneDeep用来做 Deep Copy  
![图片描述][310f1ee46ab7de621723b7258ca855bf.png]

[Link 1]: https://segmentfault.com/a/1190000018874254
[html]: https://segmentfault.com/t/html
[20b664e29d81a4d12207dd795be540fb.png]: /images/20221120/ca6783dac6d74da7b9372657804c35bc.png
[6c073cff2875a4277054bf0d4f363548.png]: /images/20221120/2d6463ffabbc4fc9949314d6afd9f4a6.png
[format_png]: /images/20221120/88924eff3fd04186ad630fc4366fbf12.png
[format_png 1]: /images/20221120/2c74fe97cd8f4f888432b6a1e68b702b.png
[2691aabb18cadf0dffdfda76ec19b3c3.png]: https://img-blog.csdnimg.cn/img_convert/2691aabb18cadf0dffdfda76ec19b3c3.png
[bf2cdc70f3ac6912b6365f3fa7b70072.png]: https://img-blog.csdnimg.cn/img_convert/bf2cdc70f3ac6912b6365f3fa7b70072.png
[45072497b5c751c047b449df35c87704.png]: https://img-blog.csdnimg.cn/img_convert/45072497b5c751c047b449df35c87704.png
[27e47e72d28a0e0c3fb07e114ca04f3d.png]: https://img-blog.csdnimg.cn/img_convert/27e47e72d28a0e0c3fb07e114ca04f3d.png
[5231d393de15172f3e4c7cb38646eafa.png]: https://img-blog.csdnimg.cn/img_convert/5231d393de15172f3e4c7cb38646eafa.png
[131d19ae964c3280c2c3544fd4b87237.png]: https://img-blog.csdnimg.cn/img_convert/131d19ae964c3280c2c3544fd4b87237.png
[bce99aee6941c13178e36ec9f174680b.png]: https://img-blog.csdnimg.cn/img_convert/bce99aee6941c13178e36ec9f174680b.png
[dfc5578dc1abbc410653f6ac81e74bcb.png]: https://img-blog.csdnimg.cn/img_convert/dfc5578dc1abbc410653f6ac81e74bcb.png
[db15f7682d720fe98101320dbaeb4c08.png]: https://img-blog.csdnimg.cn/img_convert/db15f7682d720fe98101320dbaeb4c08.png
[1ffe4a6e2b80482b93514b355be5fb45.png]: https://img-blog.csdnimg.cn/img_convert/1ffe4a6e2b80482b93514b355be5fb45.png
[cbb63c073b4a7fcc80d554dd9eb1db3f.png]: https://img-blog.csdnimg.cn/img_convert/cbb63c073b4a7fcc80d554dd9eb1db3f.png
[61a1fa8639ee0c0b747985a1ddf78594.png]: https://img-blog.csdnimg.cn/img_convert/61a1fa8639ee0c0b747985a1ddf78594.png
[f33489b18858385ab30ea400e3ee3835.png]: https://img-blog.csdnimg.cn/img_convert/f33489b18858385ab30ea400e3ee3835.png
[f670d5da328374baa4d662e71f515acd.png]: https://img-blog.csdnimg.cn/img_convert/f670d5da328374baa4d662e71f515acd.png
[f6c720c98f48b321e926f0fdf86f7aaf.png]: https://img-blog.csdnimg.cn/img_convert/f6c720c98f48b321e926f0fdf86f7aaf.png
[64b5ca449b2bc91c9757d8e31c9214ec.png]: https://img-blog.csdnimg.cn/img_convert/64b5ca449b2bc91c9757d8e31c9214ec.png
[f67d1f52a73f2b2a38af765cd5840792.png]: https://img-blog.csdnimg.cn/img_convert/f67d1f52a73f2b2a38af765cd5840792.png
[310f1ee46ab7de621723b7258ca855bf.png]: https://img-blog.csdnimg.cn/img_convert/310f1ee46ab7de621723b7258ca855bf.png