1. 程式人生 > >談談js中深度克隆和淺度克隆

談談js中深度克隆和淺度克隆

typeof ren ng- set [] user 淺度克隆 array child

在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.   Array(3)
    2. 0:"標簽1"
    3. 1:"標簽2"
    4. 2:"體育"
    5. length:3

深克隆就是在克隆的時候判斷一下屬性的類型是不是引用型變量,如果是的話就用遞歸方法讓它一層一層進去復制自己。

這就是深度克隆了,其實是JS的繼承的方法的一種。

談談js中深度克隆和淺度克隆