所谓深拷贝,就是子对象不紧继承父对象的非引用属性,还能继承父对象的引用属性(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. Mixnode 让操作网络资源和数据库一样简单,不一样的爬虫!

    简评: hacker news 上刷的一篇文章,可以使用类似操作数据库的方式访问网络上的资源,可以大大简化爬虫的代码. Mixnode 将网络变成了一个巨大的数据库!换句话说,Mixnode 允许您将 ...

  2. LLDB 和Chisel 使用例子

    打印变量 打印数字 (lldb) p/d 16 16 16 进制格式 (lldb) p/x 16 0x10 2 进制格式 (lldb) p/t 16 0b00000000000000000000000 ...

  3. Tomcat启动和请求处理解析

    tomcat是我们经常使用的组件,但是内部是如何运行的呢,我们去一探究竟. 1.tomcat架构 tomcat的整体架构图如下: Tomcat中只有一个Server,一个Server可以有多个Serv ...

  4. js的window对象

    js的window对象 1.子窗口方法 function testOpen(){ window.open('son.html','newwindow','height=400, width=600, ...

  5. django在model中添加字段报错

    在以下类中添加 description 字段后, class Colors(models.Model): colors = models.CharField(u'颜色', max_length=10) ...

  6. KCF+Opencv3.0+Cmake+Win10

    配置 需要的文件下载 安装CMake,安装opencv3.0.0 在KCFcpp-master 目录下新建一个文件夹,命名为build 打开CMake-GUI配置如下: 点击Configure,编译器 ...

  7. java获取某段时间内的月份列表

    /**获取两个时间节点之间的月份列表**/ private static List<String> getMonthBetween(String minDate, String maxDa ...

  8. 微信内置的浏览器window.location.href 跳转不兼容问题

    1.不兼容苹果手机---->>>>使用模拟触发a标签 <a id="alink" href="http://www.baidu.com&qu ...

  9. Eclipse下,修改MAVEN 中央仓库地址,解决maven下载慢问题

    作用于所有工作空间: 1.逐项打开:eclipse->preference->Maven->User Settings.按窗口中的User Settings文本框显示的路径,创建se ...

  10. [转] 两个静态html页面传值方法的总结

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/csdn_ds/article/details/78393564 问题 因最近尝试实现客户端与服务端分 ...