深拷贝与浅拷贝的区别

如何理解深拷贝与浅拷贝，首先我们我们要了解下面两种数据类型

1. 基本数据类型：

number，string，boolean，null，undefined，symbol以及未来ES10新增的BigInt(任意精度整数)七类都属于基本数据类型。

2.引用数据类型（复杂数据类型）：

如对象，数组，函数等，深拷贝本身只针对较为复杂的object类型数据

 假设b复制了a (b=a），当我们修改b时，a也随之被修改了，或者修改a时，b也会随之被修改，这就是浅拷贝，如果修改一个另一个不会随着被修改就是深拷贝，例子如下：

 

 而当我们把a换成基本数据类型，就不会相互影响，例子如下

 

 

 那这到底是为什么呢？

 原因如下：基本数据类型属性名和值都存在栈内存中，例如var  a = 1

 当你b=a复制时，栈内存会新开辟一个内存，例如这样：

 所以你此时修改b = 2 ，对a不会造成影响，因为它俩都有自己的栈内存，但这并不能叫深拷贝，原因最上面说了（深拷贝本身只针对较为复杂的object类型数据或者引用数据类型）

引用数据类型（复杂数据类型）属性名在栈内存中，值却在堆内存中，以第一个例子画图如下：

 当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。

 而当我们b[0]=1时时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了

 那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了

-----------------------------------------------------------------------------------------------------------------

 下面我们来实现简单的深拷贝

我们封装一个深拷贝的函数(PS：只是一个基本实现的展示，并非最佳实践)

 可以看到：

 跟之前想象的一样，现在b脱离了a的控制，不再受a影响了。

这里再次强调，深拷贝，是拷贝对象各个层级的属性，可以看个例子。JQuery里有一个extend方法也可以拷贝对象，我们来看看

 

 那是不是说slice方法也是深拷贝了，毕竟b也没受a的影响，上面说了，深拷贝是会拷贝所有层级的属性，还是这个例子，我们把a改改

 

 拷贝的不彻底啊，b对象的一级属性确实不受影响了，但是二级属性还是没能拷贝成功，仍然脱离不了a的控制，说明slice根本不是真正的深拷贝。

第一层的属性确实深拷贝，拥有了独立的内存，但更深的属性却仍然公用了地址，所以才会造成上面的问题。

同理，concat方法与slice也存在这样的情况，他们都不是真正的深拷贝，这里需要注意。

 我们可以借用JSON对象的parse和stringify试试

 

可以看到，这下b是完全不受a的影响了。

附带说下，JSON.stringify与JSON.parse除了实现深拷贝，还能结合localStorage实现对象数组存储。

.除了上面两种方法之外，我们还可以借用JQ的extend方法。

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝

target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。

object1  objectN可选。 Object类型 第一个以及第N个被合并的对象。 

示是否深拷贝，为true为深拷贝，为false，则为浅拷贝