所谓深拷贝,就是子对象不紧继承父对象的非引用属性,还能继承父对象的引用属性(Object,Array),当子对象对继承的引用类型属性做修改时,父对象的引用类型不会被修改。

我们先写个浅拷贝的封装函数:

function extendCopy(parent){
var child={};
for(var i in parent){
child[i]=parent[i];
}
child.uber=parent;
return child;
}

接下来写个深拷贝的封装函数:

function deepCopy(p,c){
var c=c||{};
for(var i in p){
if(typeof p[i]==="object"){
c[i]=(p[i].constructor===Array)? [] : {};
       deepCopy(p[i],c[i]);
}else{
c[i]=p[i];
}
}
return c;
}

分析两个函数有何不同,extendCopy方法是将父对象的属性和方法逐个的拷贝给子对象,当遇到引用类型的属性时,比如数组,那么若对子对象拷贝而来的数组进行重写时,父对象对应的数组也会随之改变,因为他们指向的是同一地址。

而deepCopy方法:

举个栗子:

var parent={

  score:[1,2,3,4];

}

var child=deepCopy(parent);

执行deepCopy函数后,当执行到

if(typeof parent[score]==='object')时,

child[score]=[];

再执行deepCopy(parent[score],child[score]);

此时typeof p[i]就不是'object'类型了,而是number类型,

所以

child[score][1]=parent[score][1]=1;

child[score][2]=parent[score][2]=2;

child[score][3]=parent[score][3]=3;

child[score][4]=parent[score][4]=4;

在return child[score];

这样就完成了深拷贝,child[score]和parent[score]不是指向同一个地址了。但此时两者值相同,只是地址不同,若再对child[score]做修改,parent[score]不会有任何变化。

我们来试验一下:

var Shape={
color:"blue",
name:"shape",
size:[1,2,3,4],
getName:function(){
return this.name;
}
} var circle=deepCopy(Shape);
var tran=extendCopy(Shape);
circle.size.push(5,6);
console.log(circle.size); //[1,2,3,4,5,6]
console.log(Shape.size);//[1,2,3,4]  深拷贝父对象值没有变化
tran.size.push(5,6,7,8);
console.log(circle.size); //[1,2,3,4,5,6]
console.log(tran.size);//[1,2,3,4,5,6,7,8]
console.log(Shape.size); //[1,2,3,4,5,6,7,8] 浅拷贝随着tran.size的改变,Shape.size也会随之改变,

上述demo很好的验证了浅拷贝和深拷贝的区别

JS深拷贝继承的更多相关文章

  1. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  2. js实现继承的5种方式 (笔记)

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  3. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. js实现继承的两种方式

    这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...

  6. js实现继承

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...

  7. 浅谈JS的继承

    JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无 ...

  8. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  9. js 深拷贝和浅拷贝

    js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...

随机推荐

  1. YC全球总裁:我招揽陆奇好多年,如今终于如愿了!

    简评:YC 老大多年来一直在努力招揽陆奇,终于如愿了. YC 总裁 Sam Altman 在 8 月 14 日,发布了关于陆奇以及 YC 中国的公告,全文如下: 我非常荣幸地宣布,陆奇加入 YC 并且 ...

  2. Oracle to_char的用法

    The following are number examples for the to_char function. to_char(1210.73, '9999.9') would return ...

  3. Hadoop虚拟机的jdk版本和本地eclipse的版本不一致怎么办

    在本周学习Hadoop遇到了一个问题,困扰了半天,本人在安装Hadoop时是按照视频来的,结果发现Hadoop上的jdk版本和本地eclipse的版本不一致,导致本地的程序到处jar包传到虚拟机上运用 ...

  4. linux下安装gcc详解

    1.了解一下gcc 目前,GCC可以用来编译C/C++.FORTRAN.JAVA.OBJC.ADA等语言的程序,可根据需要选择安装支持的语言.我自己linux上是4.1.2版本,是不支持openMP的 ...

  5. 详细解读KMP模式匹配算法

    转载请注明出处:http://blog.csdn.net/fightlei/article/details/52712461 首先我们需要了解什么是模式匹配? 子串定位运算又称为模式匹配(Patter ...

  6. ui2-3

    2016.9讲义 一.课程的主要内容和目的 二.课程所用工具软件——Photoshop CS6 1. Photoshop 的发展史 1990.2,ps1.0问世,1991.2,PS2.0发行,此后,进 ...

  7. OpenERP how to set the tree view limit

    return { 'name':u'库存报表', 'view_type':'form', 'view_mode':'tree,form', 'res_model':'rainsoft.account. ...

  8. Mac下使用PF进行端口转发和防火墙配置(类似Linux的iptables)

    在Mac没有iptables这些,替代的软件为PF,命令为pfctl.在早些版本用ipfw(<=10.10),后面改为PF.还有一些可以使用OpenBsd,不过这个不太好用. 网上关于pfctl ...

  9. vue构造器以及实例属性

    一.构造器 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项对象): 3.参数:选项对象可 ...

  10. Linux-socket使用

    socket 产生的原因 进程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进程之间既互不干扰又协调一致工作,操作系统为进程通信提供了相应设施,如 UNIX ...