JavaScript 中的对象深度复制(Object Deep Clone)

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。