打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
浅析JS中的深拷贝与浅拷贝

1 为什么要用到拷贝

在平时的学习生活中,我们在JS程序中需要进行频繁的变量赋值运算,对于一般的字符串、布尔值等可以直接使用赋值运算符“=”即可,但是对于数组、对象、对象数组的拷贝,我们就需要用到拷贝了。

2 什么是深拷贝与浅拷贝

首先我们从字面上来理解深拷贝、浅拷贝与拷贝的含义。

拷贝:就是复制一份,指将对象数据进行复制。

深拷贝:如果拷贝的时候,将数据的所有引用结构都拷贝一份,那么数据在内存中独立就是深拷贝。

浅拷贝:如果拷贝的时候,只针对当前对象的属性进行拷贝,而属性是引用类型这个不考虑,那么就是浅拷贝。

重要的是在讨论深拷贝与浅拷贝的时候一定要保证对象的属性也是引用类型。

下面我们用一个简单的实例来理解拷贝的含义:

eg :  var o = { name : ‘ 张三 ‘ }

                     var obj = o;

上面这个例子中,我们就能知道这个不是拷贝,为什么呢?是因为我们针对拷贝而言,是拷贝对象,所以这里我们只是拷贝了一个变量的引用,而没有将对象拷贝出来,那么这里就只能叫做引用赋值。

下面我们用一段代码来看看什么是浅拷贝:

这里为什么就是浅拷贝了呢?是因为p.car中的car在赋值的时候存储的是引用地址,而不是数据本身,所以这个car传过去的时候,pCopy.car也存了引用地址,所以这个car有一个副本,而p有两个副本。在内存图中如下所示:

那么浅拷贝所带来的恶果就是在pCopy进行操作的时候,很有可能把p的某些数据也进行了修改。这里的DOM对象是引用类型,所以当我们的DOM树变得非常复杂得时候,上面的问题就有可能发生,如当拷贝一个节点的时候,但这个节点下还有节点,这时候就会出现这种问题。所以我们在操作DOM的时候,不能使用浅拷贝。

接下来用代码解释什么是深拷贝:

在这里就相当于创建了一个car对象,然后把car对象的属性给了pCopy.car,这样它就独立了。内存图如下所示:

以上就是深拷贝和浅拷贝的概念,那么用通俗的话来讲就是对儿子和爸爸而言,现在再克隆一个儿子,两个共享一个爸爸,那么这就是浅拷贝。如果把全家人都克隆一次,那么就是深拷贝。

3 总结

以上就是我对深拷贝与浅拷贝的理解,这只是最基础的部分,以后还会对拷贝的对象封装问题进行学习,因此对该部分内容的学习还有很多,并且只有加强对引用类型的赋值和值类型的赋值理解清楚才能学习得相对容易。若有理解不到位的地方,敬请指正。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
关于Ext内存泄漏的部分心得
JS 脚本标记
37道WEB前端开发面试题之JavaScript篇章!
JS中DOM重点基础知识实验(全)
第一章 : javaScript框架分类及主要功能
JavaScript基础-07-DOM
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服