javascript實現物件直接量合併效果

使用jQuery的$.extend()方法可以輕鬆的實現物件合併效果。

關於$.extend()可以參閱jQuery.extend()方法一章節。

下面就通過程式碼例項介紹一下如何利用原生javascript實現此功能。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var one={
  webName:"螞蟻部落",
}
var two = {
  url:"softwhy.com",
  func:function(){
    console.log("青島市南區");
  }
}
var three={
  age:2
};
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;
};
function extendObj() { //擴充套件物件
  var args = arguments;
  if (args.length < 2) return;
  var temp = cloneObj(args[0]); //呼叫複製物件方法
  for (var n = 1; n < args.length;n++){
    for (var index in args[n]) {
      temp[index] = args[n][index];
    }
  }
  return temp;
}
var t=extendObj(one,two,three);
console.log(t);
console.log(one);
console.log(two);
console.log(three);

上面的程式碼實現物件的合併效果，並返回一個全新的合併後的物件，下面介紹一下它的實現過程。

一.程式碼註釋:

1.var one={}表示宣告一個物件直接量。後面三個都是如此。

2.function cloneObj(oldObj) {}，此方法可以拷貝一個物件，引數就是要拷貝的物件。

3.if (typeof(oldObj) != 'object') return oldObj，如果引數不是一個物件，那麼直接返回此引數。

4.if (oldObj == null) return oldObj，如果引數為null，則直接返回null。

5.var newObj = new Object()，建立一個新的物件。

6.for (var prop in oldObj)

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

遍歷物件中的每一個屬性，為新建的物件新增對應的屬性和屬性值。

注意這裡採用遞迴的方式，這是因為要拷貝物件的屬性值有可能也是一個物件。

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

8.function extendObj() {}，擴充套件指定的物件，其實就是擴充套件第一個物件，不過返回的是一個新的物件，元物件都不變。

9.var args = arguments，將傳遞的實參複製給args變數。

10.if (args.length < 2) return，如果只傳遞了一個引數，那麼直接跳出函式，因為沒有什麼要擴充套件的。

11.var temp = cloneObj(args[0])，獲取第一個引數物件的拷貝。

12.for (var n = 1; n < args.length;n++)，遍歷除第一個的以外的所有引數。

13.for (var index in args[n]) {

  temp[index] = args[n][index];

}，為temp物件擴充套件相應的屬性。

14.return temp，返回擴充套件後的物件。

二.相關閱讀:

1.for in語句可以參閱javascript的for in語句一章節。

2.object物件javascript獲取物件直接量中的屬性和屬性值一章節。