所谓深拷贝,就是子对象不紧继承父对象的非引用属性,还能继承父对象的引用属性(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. python random 之基础点名器

    import os ,sysimport randomcalled =set() # 创建一个空集合f =open('name.txt ' , 'r')#打开文件读取名字data =f.read()# ...

  2. iOS几个功能:1.摇一摇;2.震动;3.简单的摇动动画;4.生成二维码图片;5.发送短信;6.播放网络音频等

    有一个开锁的功能,具体的需求就类似于微信的“摇一摇”功能:摇动手机,手机震动,手机上的锁的图片摇动一下,然后发送开锁指令.需求简单,但用到了许多方面的知识. 1.摇一摇 相对这是最简单的功能了. 在v ...

  3. 技巧方法 - CentOS6将Python2.6.6升级到Python2.7.6

    1.首先使用“python -V”命令查看python版本,我们测试主机显示的是2.6.6版,于是下面就着手将python2.6.6升级到Python2.7.6.python -V #查看python ...

  4. 【SpringBoot+Mybatis+thymeleaf报错】Error resolving template "XXX", template might not exist or might not be accessible by any of the configured

    解决方法一: 原因:在使用springboot的过程中,如果使用thymeleaf作为模板文件,则要求HTML格式必须为严格的html5格式,必须有结束标签,否则会报错. 在application.y ...

  5. python全栈开发_day15_模块学习

    一:模块 1)什么是模块 每一个py文件就是一个模块 导入模块,会编译执行 1.形成一个对应的pyc文件 2.产生该模块自己的店全局名称空间 3.在使用该模块的全局名称空间中产生一个名字(导入的模块名 ...

  6. 【性能测试】:关于loadrunner11录制Chrome浏览器脚本的方法

    有些web端的程序只能通过chrome访问,如果用lr11录制的话,会抓不到包, 现在教一种方法,可以抓到包的,主体思路就是设置代理,让报文流量绕道走一下 一,在LR中的设置: 从菜单Tools-Re ...

  7. swagger注释API详细说明

    API详细说明 注释汇总 @RequestMapping此注解的推荐配置 value method produces 示例: @ApiOperation("信息软删除") @Api ...

  8. Stopwatch类学习

    1.概述:给一条大MSDN的链接关于Stopwatch类最详细的教程 ,然后看着教程自己手动敲一边,加深映象,好记性不如烂键盘,哈哈,开个玩笑! 2.类位置:这个类在哪里,这个是重点,虽然C#IDE很 ...

  9. css3记事

    1.文字超出省略 text-overflow: ellipsis white-space: nowrap; overflow: hidden; text-overflow: ellipsis; *父元 ...

  10. SQL 常用脚本,非常适用

    一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...