深拷贝与浅拷贝的区别

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

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,则为浅拷贝

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值