js对象的深度克隆

js对象的深度克隆

基本类型和引用类型的复制

对于复制相信大家都不陌生，复制了有两种情况：引用类型的复制与基本类型的复制。其中基本类型的复制：在变量对象上创建一个新值，然后将该值复制到新值分配的位置上去。这两个变量可以参与任何操作而不互相影响。且二者都存储在栈内存中。

而对于引用类型的复制，传递的仅仅是一个指向原引用类型的的地址（类似指针的概念）。他是仅仅是对地址的引用，而非间接寻址。这两个变量参与任何操作都会互相影响，原对象存储于堆内存，复制后对象存储于栈内存中。

引用类型的深度克隆

这两天因为准备面试所以刷了一下题。遇到一个出镜率很高的boy:对象的深度克隆。本以为拿来网上别人写的答案理解一下就可以，但在运行代码时总会出现或多或少的问题。所以自己又花了半天时间调试出一个自己的clone。可能会有或多或少的情况没有考虑到，希望大家多多指点。

参考案例

首先，我先放我参考的一个博友 u010599762（http://m.blog.csdn.net/article/details?id=40144017）的clone方法。

{
var o;
if(obj1.constructor==Object)
{
o = new obj1.constructor() ;
}
else
{
o = new obj1.constructor(obj1.valueOf())
}
for(var key in obj1)
{
if(obj1[key]!=o[key])
{
if(typeof obj1[key] =="object"&&obj1[key]!=null)
o[key] = clone2(obj1[key]) ;
else
o[key] = obj1[key] ;
}
}
return o ;
}

测试用例：

function Obj1(){
this.a = 1 ;
this.b = 2 ;
this.view = {
'name':'zhangsan'
};
}
Obj1.prototype.arr = [1,2,3,4] ;
var oNew = new Obj1();

var copy = clone2(oNew) ;
copy.view = {
age : 10
} ;

console.log('copy:'+copy.view);
console.log('oNew:'+oNew.view);

var oNew2 = {
name : 'pan',
position : 'student'
}
var copy2 = clone2(oNew2);
copy2.name = 'wang';
console.log(copy2.name);//'wang'
console.log(oNew2.name);//'pan'

问题一

对于普通对象的克隆是没什么问题，但是对于数组的克隆处理的就有点问题了。在测试用例中

Obj1.prototype.arr = [1,2,3,4] ;
var oNew = new Obj1();
var copy = clone2(oNew) ;

我用firebug调试了一下：

发现会出现这样的问题：copy 的数组对象arr 被克隆成了[[1,2,3,4]]。这是由于o = new obj1.constructor(obj1.valueOf());将传入数组作为一个对象进行处理了。

问题二

而且对于以字面量形式生成的对象也没有解决。

测试代码：

var oNew2 = {
name : 'pan',
position : 'student'
}
var copy2 = clone2(oNew2);
console.log(copy2);
console.log(oNew2);

修改过的代码

于是帮我把程序进行了修改：

function clone2(obj1) {
var o;
if(obj1.constructor==Object){//当obj1为字面量形式生成对象情况。
o = new obj1.constructor() ;
for(var key in obj1)
{
if(o[key] != obj1[key]) {
if(typeof obj1[key] =="object"&&obj1[key]!=null)
o[key] = clone2(obj1[key]) ;
else
o[key] = obj1[key] ;
}
}
} else if(obj1.constructor == Array) {
//obj1是数组时的情况
var array = [];
obj1.forEach(function(value) {
if(typeof(value) != "object")
array.push(value);//数组元素为基本类型
else
array.push(clone2(value));//数组元素为引用类型
});
o = array;
} else {//以构造函数形式new出的对象
o = new obj1.constructor(obj1.valueOf());
//当obj1为内置对象时obj1.valueOf()的参数作用才真正使用。否则，这里传递的参数就不会被用到。
for(var key in obj1){
if(!obj1.hasOwnProperty(key)) {
if(typeof obj1[key] =="object"&&obj1[key]!=null)
o[key] = clone2(obj1[key]) ;
else
o[key] = obj1[key] ;
}
}
}
return o ;
}

这里有一点需要注意。在处理字面量对象（obj1.constructor==Object）与构造函数对象时我们队对象本身属性的判断方式不同。

对于字面量对象：

if(o[key] != obj1[key])

对于构造函数对象：

if(!obj1.hasOwnProperty(key))

这里是用于处理字面量问题的。

自述

小白一枚，代码可能漏洞百出，大家不喜可提点一下，但勿喷，会打击伦家写博客的热情滴。。。。