jQuery.extend()

常常在別人的 jQuery library 裡看到很多 jQuery function，應該要來瞭解一下。

第一個找簡單的 jQuery.extend()。

jQuery.extend() 功能簡單的講就是「物件屬性的聯集」，屬性包括 property 與 function。

例如：

var a = { name: 'Neil', say: function(){ alert('a'); } };
var b = { sex: 'M', say: function(){ alert('b'); } };
$.extend(a, b); // a  變成 { name: 'Neil', sex: 'M', say: function(){ alert('b'); } }

以 a 為底，將 b 的所有屬性包括 function 都複製到 a 裡，沒有同名就新增，有同名就覆蓋。

還可以同時聯集多個物件。

var a = { name: 'Neil', say: function(){ alert('a'); } };
var b = { sex: 'M', say: function(){ alert('b'); } };
var c = { name: 'Neil Chan', skill: 'js', say: function(){ alert('c'); } };
$.extend(a, b, c); // a  變成 { name: 'Neil Chan', sex: 'M', skill: 'js', say: function(){ alert('c'); } }

以 a 為底，先將 b 的所有屬性包括 function 都複製到 a 裡，再將 c 的所有屬性包括 function 都複製到 a 裡，沒有同名就新增，有同名就覆蓋，可以無限制的聯集 N 個物件。

以上用法有一個副作用，就是 a 會被玷污，改善的方法很簡單。

var a = { name: 'Neil', say: function(){ alert('a'); } };
var b = { sex: 'M', say: function(){ alert('b'); } };
var ab = $.extend({}, a, b);

改以空物件為底，並取得 $.extend() 的回傳物件即可。


$.extend 最常用來作為「預設值物件」，假設有一個 API 需要 5 個設定值，但這 5 個設定值都有預設值，也可以接受自訂。

var aDefault = {
    title: 'test',
    width: 100,
    height: 100,
    color: '#F00',
    speed: 'middle'
};
function aAPI(opts) {
  var settings = $.extend({}, aDefault, opts);
  // do the API
  // ...
}
aAPI(); // {title: "test", width: 100, height: 100, color: "#F00", speed: "middle"}
aAPI({ width: 200 }); // {title: "test", width: 200, height: 100, color: "#F00", speed: "middle"}

---
---
---