谈谈js中深度克隆和浅度克隆

在js中，咱们一般经过var建立一个json对象来方便存储数据，

var template = {

　　user:'张某',

　　password:'',

　　tem:['标签1','标签2']

}

这种方式通常做为标准数据格式。

 

咱们先来说浅度克隆

而后咱们观察下面代码

function setObject(obj){
　　var newObj = {};
　　for(var i in obj){
　　　　newObj[i] = obj[i]
　　}
　　return newObj;
}

var tem2 = setObject(template);
tem2.user="肖某";
tem2.password = "123";
tem2.tem.push('音乐');

var tem3 = setObject(template);
tem3.user="刘某";
tem3.password = "123456";
tem3.tem.push('体育');

console.log(tem2) //

1. "标签1"
2. 1:"标签2"
3. 2:"音乐"
4. 3:"体育"

console.log(tem3) //

1. "标签1"
2. 1:"标签2"
3. 2:"音乐"
4. 3:"体育"

经过打印看到tem2的tem跟tem3的tem的数组同样。

这很好理解，由于简单的复制对象，若是对象其中一个属性是引用型变量，就会出现这种状况，由于引用型变量保存的是内存地址，因此其实后来操做的都是同一块内存，致使了数组内容都同样。

 

再来看看下面这种状况

function setObject(obj,newObj){
　　var newObj = newObj || {};
　　for(var i in obj){
　　　　if(typeof obj[i] == 'object'){
　　　　　　newObj[i] = (obj[i].constructor === Array) ? [] : {}
　　　　　　setObject(obj[i],newObj[i])
　　　　}else{
　　　　　　newObj[i] = obj[i]
　　　}
}
　　　return newObj;
}

var tem2 = setObject(template);
tem2.user="肖某";
tem2.password = "123";
tem2.tem.push('音乐');


var tem3 = setObject(template);
tem3.user="刘某";
tem3.password = "123456";
tem3.tem.push('体育');

console.log(tem2) //tem2.tem

　　　　　　 Array(3)

1. 0:"标签1"
2. 1:"标签2"
3. 2:"音乐"
4. length:3

console.log(tem3) // tem3.tem

1. 1. 　　Array(3)
   2. 0:"标签1"
   3. 1:"标签2"
   4. 2:"体育"
   5. length:3

深克隆就是在克隆的时候判断一下属性的类型是否是引用型变量，若是是的话就用递归方法让它一层一层进去复制本身。

这就是深度克隆了，实际上是JS的继承的方法的一种。