jQuery.extend的用法

有網友提問，看不太懂jQuery.extend 的用法，本想在留言裡回覆，但寫著寫著，發現要說到淺顯白話，還真得花些篇幅，索性另起一篇，解釋得更詳細點。

以jQuery.extend (objA, objB)為例，你可以想像成objA與objB各有一些屬性(方法也會比照處理，在此只提屬性)，extend()會將objB有而objA沒有的屬性 加到objA裡，如果objB裡的某個屬性，objA裡剛好也有同名的屬性，則會用objB的屬性值去覆寫objA原有的屬性。objA最後就是整合結 果，或者也可以由var objC = jQuery.extend (objA, objB)取得整合結果(objA == objC)。

例如以下的程式碼，大家可以丟到Mini jQuery Lab 跑一下，馬上就可以驗證jQuery.extend 的效果:

var
 objA = { speed:"slow"
 };

var
 objB = { speed:"fast"
, power:"hard"
 };

var
 objC = jQuery.extend
( objA, objB );

document.write("<dt>objA"
);

for
 (var
 p in
 objA) { document.write("<dd>"
 + p + "->"
 + objA[p]); }

document.write("<dt>objC"
);

for
 (var
 p in
 objC) { document.write("<dd>"
 + p + "->"
 + objC[p]); }

所得結果objA與objC的內容相同，都有兩個屬性speed:"fast"(被覆寫), power:"hard"(新加的)。

jQuery.extend 可以支援多個物件屬性/方法的整併，並不限於兩個。例如: jQuery.extend (objA, objB, objC)，objB, objC多出的屬性都會加到objA裡，如果有objA已有同名屬性，則會用objC/objB裡的屬性值覆寫之，若objB, objC都用同名屬性，則會排在後方的objC為準(後令壓前令)。

jQuery.extend 的 最常見的用途是用來處理Plugin或函數的傳入參數，比如函數會用到的參數有10個，但大部分情況呼叫時只需要指定其中一兩個，其餘的用預設值即可。於 是我們可以在函數中宣告一個預設值物件objDefault，裡面已有10個屬性，呼叫函數時則傳入objOption，裡面只放入一兩個要變更的屬性 值，經過var objSetting = jQuery.extend (objDefault, objOption)之後，我們得到10個"有指定用指定值，沒指定用預設值"的屬性供後續使用。舉個例子:

function
 addDiv(options) {

    var
 defaults = { 

        border: "solid 1px black"
,

        backgroundColor: "#cccccc"
,

        width: "200px"
, height: "50px"
,

    margin: "10px"

    };

    var
 settings = $.extend(defaults, options);

    $("<div></div>"
).css(settings).appendTo("body"
);

}

addDiv({ width: "400px"
 });

addDiv({ backgroundColor: "orange"
, height: "100px"
 });