js關於物件直接量的拷貝簡單介紹

本章節介紹一下關於物件直接量拷貝相關的一些問題。

可能很多朋友認為這個操作實在是太簡單了，看如下程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
var obj={
  webName:"螞蟻部落",
  innerObj:{
    url:"softwhy.com"
  }
}
var newObj=new Object();
for(var prop in obj){
  newObj[prop]=obj[prop];
}
console.log(newObj.webName);

上面的程式碼貌似很完美的實現拷貝複製效果，其實並非如此，看如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
var obj={
  webName:"螞蟻部落",
  innerObj:{
    url:"softwhy.com"
  }
}
var newObj=new Object();
for(var prop in obj){
  newObj[prop]=obj[prop];
}
obj.innerObj.url="螞蟻部落網址";
console.log(newObj.innerObj.url);

從上面的程式碼可以看出並沒有實現真正的拷貝效果，通過obj物件修改屬性的相關值，在所謂的拷貝物件中也會被修改。

這是因為在上面的物件拷貝中，如果屬性值是一個引用型別的，那麼新拷貝中的相關屬性的賦值只是那個引用型別資料的地址，所以這並不是真正的拷貝。下面來看一下如何實現真正的拷貝，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var obj={
  webName:"螞蟻部落",
  innerObj:{
    url:"softwhy.com"
  }
}
function cloneObj(oldObj){
  if (typeof(oldObj) != 'object') return oldObj;
  if (oldObj == null) return oldObj;
  var newObj = new Object();
  for (var prop in oldObj){    
    newObj[prop] = cloneObj(oldObj[prop]);
  }
  return newObj;
};
var newObj=cloneObj(obj);
obj.innerObj.url="螞蟻部落網址";
console.log(newObj.innerObj.url);

上面的程式碼實現了物件直接量的真正拷貝效果，下面介紹一下它的實現過程。

程式碼註釋:

1.function cloneObj(oldObj){}，此函式實現了真正的拷貝效果，引數是待拷貝的物件。

2.if (typeof(oldObj) != 'object') return oldObj，判斷引數是不是一個物件，如果不是，則直接返回此值。

3.if (oldObj == null) return oldObj，如果引數是null，那麼也直接返回null。

4.var newObj = new Object()，建立一個新的物件，這個物件就是拷貝物件。

5.for (var prop in oldObj){  

  newObj[prop] = cloneObj(oldObj[prop]);

}，通過for in語句遍歷物件。

newObj[prop] = cloneObj(oldObj[prop])，這段程式碼是核心部分，如果原來物件的屬性值是值型別的，那麼直接返回此值，但是如果是引用型別的，那麼就採用遞迴的方式繼續呼叫cloneObj()方法進行相關拷貝操作。

6.return newObj，返回拷貝的新物件。