談談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的繼承的方法的一種。