JavaScript中并没有直接提供对象复制(Object Clone)的方法。

JavaScript中的赋值,其实并不是复制对象,而是类似`c/c++`中的引用(或指针),因此下面的代码中改变对象b中的元素的时候,也就改变了对象a中的元素。

a = {k1:1, k2:2, k3:3};
b = a;
b.k2 = 4;

如果只想改变b而保持a不变,就需要对对象a进行复制。

用jQuery进行对象复制

在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制。

a = {k1:1, k2:2, k3:3};
b = {};
$.extend(b,a);

自定义clone()方法来实现对象复制

1.下面的方法,是给Object的原型(prototype)添加深度复制方法(deep clone)。

 Object.prototype.clone = function() {
// Handle null or undefined or function
if (null == this || "object" != typeof this)
return this;
// Handle the 3 simple types, Number and String and Boolean
if(this instanceof Number || this instanceof String || this instanceof Boolean)
return this.valueOf();
// Handle Date
if (this instanceof Date) {
var copy = new Date();
copy.setTime(this.getTime());
return copy;
}
// Handle Array or Object
if (this instanceof Object || this instanceof Array) {
var copy = (this instanceof Array)?[]:{};
for (var attr in this) {
if (this.hasOwnProperty(attr))
copy[attr] = this[attr]?this[attr].clone():this[attr];
}
return copy;
}
throw new Error("Unable to clone obj! Its type isn't supported.");
}

所有对象可以直接使用`.clone()`

var a=[1,2,true,null,"fdsfdsa",[1,"fdsa",{"a":1,"b":["fd",3,{"b":"3","c":""},new Date()],"c":new Date(),"d":false,"e":null}]];
var b=a.clone();

2.使用额外的工具函数实现,适用于大部分对象的深度复制(Deep Clone)。

 function clone(obj) {
// Handle the 3 simple types, and null or undefined or function
if (null == obj || "object" != typeof obj) return obj; // Handle Date
if (obj instanceof Date) {
var copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array or Object
if (obj instanceof Array | obj instanceof Object) {
var copy = (obj instanceof Array)?[]:{};
for (var attr in obj) {
if (obj.hasOwnProperty(attr))
copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("Unable to clone obj! Its type isn't supported.");
}

用法类似:

var a=[1,2,true,null,"fdsfdsa",[1,"fdsa",{"a":1,"b":["fd",3,{"b":"3","c":""},new Date()],"c":new Date(),"d":false,"e":null}]];
var b=clone(a);

测试

用上面两种方法都可以得到同样的结果。
至于用哪个怎么用,取决于你的喜好/习惯了 :)     就本人来说,我更倾向于使用原型的方法啦,方便嘛,啊哈哈哈~
你想测试结果的话,直接复制代码运行:

 var a=[1,2,true,null,"fdsfdsa",[1,"fdsa",{"a":1,"b":["fd",3,undefined,{"b":"3","c":""},new Date()],"c":new Date(),"d":false,"e":null,"f":function(){return 2;}}],function(){}];
console.log("a=",a);
console.log("b=a.clone();");
b=a.clone();
console.log("JSON.stringify(a)==JSON.stringify(b) = ",JSON.stringify(a)==JSON.stringify(b));
console.log("JSON.stringify(a)===JSON.stringify(b) = ",JSON.stringify(a)===JSON.stringify(b));
console.log("JSON.stringify(a) = ",JSON.stringify(a));
console.log("JSON.stringify(b) = ",JSON.stringify(b));
console.log("a[2]=123,b[2]=55555");
a[2]=123,b[2]=55555;
console.log("a=",a,"\t\t","b=",b); console.log("b=clone(a);");
b=clone(a);
console.log("JSON.stringify(a)==JSON.stringify(b) = ",JSON.stringify(a)==JSON.stringify(b));
console.log("JSON.stringify(a)===JSON.stringify(b) = ",JSON.stringify(a)===JSON.stringify(b));
console.log("JSON.stringify(a) = ",JSON.stringify(a));
console.log("JSON.stringify(b) = ",JSON.stringify(b));
console.log("a[2]=1234,b[2]=33333");
a[2]=1234,b[2]=33333;
console.log("a=",a,"\t\t","b=",b);

可以看到, 输出结果 `a` 和 `b` 是相等的,但是 改变 `a` 的元素的值, 并不会影响到 `b` 的元素。

访问Github,get更多技能:https://github.com/lzpong/H5_JS_Tools

JavaScript 中的对象深度复制(Object Deep Clone)的更多相关文章

  1. 深入探讨JavaScript如何实现深度复制(deep clone)

    在代码复用模式里面有一种叫做“复制属性模式”(copying properties pattern).谈到代码复用的时候,很有可能想到的是代码的继承性(inheritance),但重要的是要记住其最终 ...

  2. javascript中的对象拷贝

    js中的数据类型 在介绍javascript中的对象的拷贝之前,我先介绍一个基础的东西,javascript中的数据类型. 我们做前端的应该都知到在es6 之前,javascript中的数据类型Boo ...

  3. javascript中的对象,原型,原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  4. Javascript 中判断对象为空

    发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是 ...

  5. JavaScript中判断对象类型方法大全1

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  6. (转)javascript中的对象查找

    本文转自:http://otakustay.com/object-lookup-in-javascript/  ---很棒的一篇文章,作者的其他文章还暂时没读,但相信作者是一个谦虚 谨慎的好工程师 近 ...

  7. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  8. JavaScript中判断对象类型的种种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  9. JavaScript中的对象描述符(属性特性)

    我们先创建一个对象: var person = { name: "Nicholas", _job: "Software Engineer", sayName: ...

随机推荐

  1. 机器学习——kNN(1)基本原理

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...

  2. 1.MAVEN项目的创建与问题的解决

    一.创建一个maven-webapp.(环境:mac和15版本的IDEA) 二.next--->填写groupId(公司单位的名字,你组织的名字)和ArtifactID(有关tomcat,以后用 ...

  3. mysql根据汉字首字母排序[转]

    select  areaName  from area order by   convert(areaName USING gbk)   COLLATE   gbk_chinese_ci asc 说明 ...

  4. Django_xamin注册model错误

    可能出现的错误: 1. xadmin.sites.AlreadyRegistered: The model UserProfile is already registered 2. error:Fie ...

  5. Java多线程之线程其他类

    Java多线程之线程其他类 实际编码中除了前面讲到的常用的类之外,还有几个其他类也有可能用得到,这里来统一整理一下: 1,Callable接口和Future接口 JDK1.5以后提供了上面这2个接口, ...

  6. java 中的instanceof

    java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. 用法:resu ...

  7. JDK自带的Timer类

    Timer类负责设定TimerTask的起始和间隔执行时间.具体的执行任务,由用户创建一个TimerTask的继承类,并实现其run()方法 timer.schedule()

  8. python --- queue模块使用

    1. 什么是队列? 学过数据结构的人都知道,如果不知道队列,请Google(或百度). 2. 在python中什么是多生产者,多消费模型? 简单来说,就是一边生产(多个生产者),一边消费(多个消费者) ...

  9. traffic server文件目录

    功能: Trafficserver的主要功能是缓存,当然你也可以用它来做纯粹的反向代理(像通常用nginx那样).通常切入一个庞大的系统的最好方式是看如何使用,使用traffic server的主要入 ...

  10. KVM详情

    KVM介绍 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器 ...