深入探讨JavaScript如何实现深度复制(deep clone)
在代码复用模式里面有一种叫做“复制属性模式”(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 数组的深度复制 一般情况下,使用 "=" 可以实现赋值.但对于数组.对象.函数等这些引用类型的数据,这个符号就不好使了. 1. 数组的简单复制 1.1 简单遍 ...
- 【转】JavaScript中的对象复制(Object Clone)
JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b. ...
- 使用结构化克隆在 JavaScript 中进行深度复制
在很长一段时间内,您不得不求助于变通方法和库来创建 JavaScript 值的深层副本.现在js提供 「structuredClone()」 一个用于深度复制的内置函数. 浏览器支持: 浅拷贝 在 J ...
- JavaScript 中的对象深度复制(Object Deep Clone)
JavaScript中并没有直接提供对象复制(Object Clone)的方法. JavaScript中的赋值,其实并不是复制对象,而是类似`c/c++`中的引用(或指针),因此下面的代码中改变对象b ...
- QList介绍(QList比QVector更快,这是由它们在内存中的存储方式决定的。QStringList是在QList的基础上针对字符串提供额外的函数。at()操作比操作符[]更快,因为它不需要深度复制)非常实用
FROM:http://apps.hi.baidu.com/share/detail/33517814 今天做项目时,需要用到QList来存储一组点.为此,我对QList类的说明进行了如下翻译. QL ...
- c#学习笔记-深度复制 与浅度复制
关于值类型和引用类型: 浅度复制(shallow copy)只复制值类型(char,int )的值,而对于引用类型不会复制,浅度复制可以通过派生于System.Object的MemberwiseClo ...
- 深度解析javascript中的浅复制和深复制
原文:深度解析javascript中的浅复制和深复制 在谈javascript的浅复制和深复制之前,我们有必要在来讨论下js的数据类型.我们都知道有Number,Boolean,String,Null ...
- javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())
javascript 数组和对象的浅度复制和深度复制在平常我们用 ‘=’来用一个变量引用一个数组或对象,这里是‘引用’而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3,' ...
- 机器学习(Machine Learning)&深度学习(Deep Learning)资料【转】
转自:机器学习(Machine Learning)&深度学习(Deep Learning)资料 <Brief History of Machine Learning> 介绍:这是一 ...
随机推荐
- java语言登陆界面(菜鸟版)
最近在看的Java入门书是<Head First Java>,一本很棒的Java书. 老师要求的程序流程图我没有,之前我们的做法是写完代码再画流程图,我想这样的做法是不对的,流程图应该是在 ...
- Python 基础的应用day2
1 用户交互input,将用户输入的内容赋值给 name 变量 后只能是字符串str. 区别2和3: ps :python2:raw_input python3:input 例 :1 nam ...
- 2019-04-02-day024-内置方法
昨日回顾 反射 用"字符串"类型的属性名/方法名来找到 属性的值或者方法的内存地址 所有可以反射的内容实际上都是变量 有内存地址 内存地址存的是"具体的值",直 ...
- QueryString中的加号变成空格解决方法
通过Request.QueryString["CheckItem"]的方式调用值的时候,数值中的加号“+”会转换为空格“ ” 例如传输“ABC+EFG”,就会取到“ABC EFG” ...
- Homebrew&Mongod
Homebrew官网:http://brew.sh Homebrew installs the stuff you need that Apple didn't Homebrew的安装非常简单,打开终 ...
- 【Python】管道通信和condition
#练习:管道练习,双工,单工,将受到的消息保存到文件中 import multiprocessing as mp from multiprocessing import Process,Lock de ...
- js- 类数组对象
JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...
- Too much thinking! Too much annoying.
I am now in great demand for an opportunity to yearn for, the ability to express myself, in a maximu ...
- asp.net mvc webapi 实用的接口加密方法(转载)
在很多项目中,因为webapi是对外开放的,这个时候,我们就要得考虑接口交换数据的安全性. 安全机制也比较多,如andriod与webapi 交换数据的时候,可以走双向证书方法,但是开发成本比较大, ...
- Anaconda canda 安装 Python3 配置
链接: 1.安装Python 3.5以及tensorflow 以前用virtualenv觉得挺好用了,但是用多python版本下安装tensorflow,出现问题: pip is configured ...