文档章节

js浅拷贝、深拷贝

wlc534
 wlc534
发布于 2017/09/12 09:50
字数 462
阅读 1
收藏 0

1.浅拷贝
拷贝就是把父对像的属性,全部拷贝给子对象。
下面这个函数,就是在做拷贝:
var Chinese = {  nation:'中国'}
var Doctor = {  career:'医生'}  
function extendCopy(p) {    
var c = {};    
for (var i in p) {       
  c= p;    
}    
c.uber = p;    
return c; 
}
使用的时候,这样写:
var Doctor = extendCopy(Chinese);  
Doctor.career = '医生';  
alert(Doctor.nation); // 中国
但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。
请看,现在给Chinese添加一个"出生地"属性,它的值是一个数组。
Chinese.birthPlaces = ['北京','上海','香港'];
通过extendCopy()函数,Doctor继承了Chinese。
var Doctor = extendCopy(Chinese);
然后,我们为Doctor的"出生地"添加一个城市:
Doctor.birthPlaces.push('厦门');
看一下输入结果
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门  
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

结果是两个的出生地都被改了。
所以,extendCopy() 只是拷贝了基本类型的数据,我们把这种拷贝叫做“浅拷贝”。
2.深拷贝
因为浅深拷有如此弊端所以我们接下来看一下深拷贝
所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。
function deepCopy(p, c) {
    var c = c || {};
    for (var i in p) {
      if (typeof p === 'object') {
        c= (p.constructor === Array) ? [] : {};
        deepCopy(p, c);      
   } else {
     c= p;
   }
  }
  return c;  
}
看一下使用方法:
var Doctor = deepCopy(Chinese);
现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:
Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港
这样就完成了拷贝;

© 著作权归作者所有

共有 人打赏支持
wlc534
粉丝 6
博文 84
码字总数 143947
作品 0
私信 提问
深入JavaScript基础之深浅拷贝

最近在学到JavaScript对象的深拷贝和浅拷贝做了一些比较,将实际开发的点和基础点做了些小结,话不多说,开始进入主题吧。 基础认识---基本类型 基础认识---引用类型 浅拷贝的实现-对象&&数组...

楚梦浮生
07/30
0
0
WEB前端学习JavaScript知识点:说清楚深拷贝和浅拷贝的区别

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/28
0
0
一个后端眼中的jQuery的extend方法

概述 我看的是3.1.0版本的,先上一段代码吧,不要版本都不一样那就尴尬了,这段代码看着没有多少,但我相信这基本上是这个世界上执行的最多的代码了,再不济也是一个之一。 直接看代码有一点...

trayvon
2017/10/20
0
0
【JavaScript】对象的浅拷贝与深拷贝

前言 在 JavaScript 中,对象可谓是一个非常主要的知识点。什么原型链啊,拷贝啊,继承啊,创建啊等等等等。在我之前的文章中已经对对象的创建和继承做了一个简单的介绍,【JavaScript】ES5...

眼已望穿
07/30
0
0
关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

我们一般用来深拷贝,其过程说白了 就是利用JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象;序列化的作用是存储(对象本身存储的只是一个地址映射,...

该帐号已被查封
08/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

容器技术系列汇总

docker docker - 在centos7和windows10安装 docker - 镜像加速器 docker - 构建一个简单的docker镜像 docker - 调试Dockerfile docker - 常用命令 docker - Dockerfile常用指令 docker - doc......

细肉云吞
5分钟前
0
0
vue笔记 $set的正确用法

vue2.0 给data对象新增属性,并触发视图更新 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 众所周知,直接给student赋值操作,虽然可以新...

Carbenson
5分钟前
0
0
Confluence 6 为边栏添加自定义内容

你可以使用 wiki 标记和自定义内容来对边栏进行更进一步的自定义。 希望添加自定义内容到你的边栏中: 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Look and ...

honeymose
10分钟前
0
0
从现在开始!(上海)

从现在开始,我要暂时告别开发了。开始从测试学起,希望自己在测试方面也会有晋升!

政旭Arvin
15分钟前
1
0
网易免费企业邮箱配置客户端

网易免费企业邮箱客户端(pop、imap、smtp)权限默认开启,对应服务器地址为: 发件服务器: SMTP:smtp.ym.163.com 默认端口为:25 (如勾选ssl安全链接,端口号为994) 收件服务器: POP3...

柴高八斗之父
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部