JavaScript深度复制(deep clone)的实现方法


Posted in Javascript onFebruary 19, 2016

在代码复用模式里面有一种叫做“复制属性模式”(copying properties pattern)。谈到代码复用的时候,很有可能想到的是代码的继承性(inheritance),但重要的是要记住其最终目标——我们要复用代码。继承性只是实现代码复用的一种手段,而不是唯一的方法。复制属性也是一种复用模式,它跟继承性是有所不同的。这种模式中,对象将从另外一个在对象中获取成员,其方法是仅需将其复制即可。用过jQuery的都知道,它有一个$.extend()方法,它的用途除了扩展第三方插件之外,还可以用来复制属性的。下面我们来看一个extend()函数的实现代码(注意这里的并不是jQuery的源码,只是一个简单的示例):

function extend(parent, child) {
var i;
//如果不传入第二参数child
//那么就创建一个新的对象
child = child || {}; 
//遍历parent对象的所有属性
//并且过滤原型上的属性
//然后将自身属性复制到child对象上
for(i in parent) {
if(parent.hasOwnProperty(i)) {
child[i] = parent[i];
}
}
//返回目标对象child
return child;
}

上面的代码是一个简单的实现,它仅遍历父对象的成员并将其复制到子对象中去。下面我们用上面的extend()方法来测试一下:

var dad = {name: "Adam"};
var kid = extend(dad);
console.log(kid.name); //Adam

我们发现,extend()方法已经可以正常工作了。但是有一个问题,上面给出的是一种所谓的浅复制(shallow clone)。在使用浅复制的时候,如果改变了子对象的属性,并且该属性恰好又是一个对象,那么这种操作也会修改父对象,单是很多情况这不是我们想要的结果。考虑下列情况:

var dad = {
counts: [1, 2, 3],
reads: {paper: true}
};
var kid = extend(dad) //调用extend()方法将dad的属性复制到kid上面
kid.counts.push(4); //把4追加到kid.counts数组里面
console.log(dad.counts); //[1, 2, 3, 4]

通过上面的例子,我们会发现,修改了kid.counts属性以后(把元素4追加进去了),dad.counts也会受到影响。这是因为在使用浅复制的时候,由于对象是通过引用传递的,即kid.counts和dad.counts指向的是同一个数组(或者说在内存上他们指向同一个堆的地址)。

下面,让我们修改extend()函数以实现深度复制。我们需要做的事情就是检查父对象的每一个属性,如果该属性恰好是对象的话,那么就递归复制出该对象的属性。另外,还需要检测该对象是否为一个数组,这是因为数组的字面量创建方式和对象的字面量创建方式不一样,前者是[],后者是{}。检测数组可以使用Object.prototype.toString()方法进行检测,如果是数组的话,他会返回"[object Array]"。下面我们来看一下深度复制版本的extend()函数:

function extendDeep(parent, child) {
child = child || {};
for(var i in parent) {
if(parent.hasOwnProperty(i)) {
//检测当前属性是否为对象
if(typeof parent[i] === "object") {
//如果当前属性为对象,还要检测它是否为数组
//这是因为数组的字面量表示和对象的字面量表示不同
//前者是[],而后者是{}
child[i] = (Object.prototype.toString.call(parent[i]) === "[object Array]") ? [] : {};
//递归调用extend
extendDeep(parent[i], child[i]);
} else {
child[i] = parent[i];
}
}
}
return child;
}

好了,深度复制的函数已经写好了,下面来测试一下看是否能够预期那样子工作,即是否可以实现深度复制:

var dad = {
counts: [1, 2, 3],
reads: {paper: true}
};
var kid = extendDeep(dad);
//修改kid的counts属性和reads属性
kid.counts.push(4);
kid.reads.paper = false;
console.log(kid.counts); //[1, 2, 3, 4]
console.log(kid.reads.paper); //false
console.log(dad.counts); //[1, 2, 3]
console.log(dad.reads.paper); //true

通过上面例子,我们可以发现,即使修改了子对象的kid.counts和kid.reads,父对象的dad.counts和kid.reads并没有改变,因此我们的目的实现了。

下面来总结一下实现深复制的的基本思路:

1.检测当前属性是否为对象

2.因为数组是特殊的对象,所以,在属性为对象的前提下还需要检测它是否为数组。

3.如果是数组,则创建一个[]空数组,否则,创建一个{}空对象,并赋值给子对象的当前属性。然后,递归调用extendDeep函数。

上面例子使我们自己使用递归算法实现的一种深度复制方法。事实上,ES5新增的JSON对象提供的两个方法也可以实现深度复制,分别是JSON.stringify()和JSON.parse();前者用来将对象转成字符串,后者则把字符串转换成对象。下面我们使用该方法来实现一个深度复制的函数:

function extendDeep(parent, child) {
var i,
proxy;
proxy = JSON.stringify(parent); //把parent对象转换成字符串
proxy = JSON.parse(proxy) //把字符串转换成对象,这是parent的一个副本
child = child || {};
for(i in proxy) {
if(proxy.hasOwnProperty(i)) {
child[i] = proxy[i];
}
}
proxy = null; //因为proxy是中间对象,可以将它回收掉
return child;
}

下面是测试例子:

var dad = {
counts: [1, 2, 3],
reads: {paper: true}
};
var kid = extendDeep(dad);
//修改kid的counts属性和reads属性
kid.counts.push(4);
kid.reads.paper = false;
console.log(kid.counts); //[1, 2, 3, 4]
console.log(kid.reads.paper); //false
console.log(dad.counts); //[1, 2, 3]
console.log(dad.reads.paper); //true

测试发现,它也实现了深度复制。一般推荐使用后面这种方法,因为JSON.parse和JSON.stringify是内置函数,处理起来会比较快。另外,前面的那种方法使用了递归调用,我们都知道,递归是效率比较低的一种算法。

关于JavaScript深度复制(deep clone)的实现方法就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 #Javascript
基于JavaScript实现弹出框效果
Feb 19 #Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 #Javascript
学习javascript文件加载优化
Feb 19 #Javascript
初识angular框架后的所思所想
Feb 19 #Javascript
复杂的javascript窗口分帧解析
Feb 19 #Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 #Javascript
You might like
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
CentOS安装php v8js教程
2015/02/26 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
网页常用特效代码整理
2006/06/23 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
银行先进个人事迹材料
2014/05/11 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
学校清明节活动总结
2014/07/04 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电