方法介紹
jQuery 的 API 手冊中，extend 方法掛載在 jQuery 和 jQuery.fn 兩個不同的對象上，但在 jQuery 內(nèi)部代碼實現(xiàn)的是相同的，只是功能各不相同。
先看看官方給出的解釋：
- jQuery.extend Merge the contents of two or more objects together into the first object. 把兩個或者多個對象合并到第一個對象當中；
- jQuery.fn.extend Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. 把對象掛載到 jQuery 的 prototype 上以擴展一個新的 jQuery 實例方法 。
雖然官方對 jQuery.extend 的擴展方法功能只字未提，但是它也同樣具有擴展 jQuery 類方法 的功能。
合并對象
首先，我先來介紹一下 extend 函數(shù)在 合并對象 方面的用法。
jQuery.extend(target [, object1] [, objectN])
合并 object1 ... objectN 到 target 對象，如果只有一個參數(shù)，則該 target 對象會被合并到 jQuery 對象中。
var obj1 = {
name: 'Tom',
age: 21
}
var obj2 = {
name: 'Jerry',
sex: 'boy'
}
$.extend(obj1, obj2); // {name: "Jerry", age: 21, sex: "boy"}
obj1 // {name: "Jerry", age: 21, sex: "boy"}
obj2 // {name: "Jerry", sex: "boy"}
上述代碼展示的是將 obj2 對象合并到 obj1 對象中，這種方法會 改變 obj1 對象的結(jié)構(gòu)。如果你 不想改變 合并目標對象的結(jié)構(gòu)，你可以這么做。
var obj1 = {
name: 'Tom',
age: 21
}
var obj2 = {
name: 'Jerry',
sex: 'boy'
}
$.extend({}, obj1, obj2); // { name: "Jerry", age: 21, sex: "boy" }
obj1 // { name: "Tom", age: 21 }
obj2 // { name: "Jerry", sex: "boy" }
深淺拷貝
jQuery.extend([deep], target, object1 [, objectN])
和上面的講述的不同的是，該方法多了一個類型為 boolean 的 [deep] 傳參，當其為 true 時，將 object1 , objectN 深度復(fù)制 后合并到 target 中。
首先，我們理解一下什么叫做 深度復(fù)制 。看看其和 淺度復(fù)制 有什么區(qū)別。
var obj1 = {
name: "John",
location: {
city: "Boston",
county: "USA"
}
}
var obj2 = {
last: "Resig",
location: {
state: "MA",
county: "China"
}
}
$.extend(false, {}, obj1, obj2); // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}
$.extend(true, {}, obj1, obj2); // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}
由此可見，執(zhí)行 深度復(fù)制 會遞歸遍歷每個對象中含有復(fù)雜對象（如：數(shù)組、函數(shù)、json對象等）的屬性值進行復(fù)制，而且 淺度復(fù)制 便不會這么做。
方法擴展
上述的 extend 方法中的 target 參數(shù)是可以省略的。如果省略了，則該方法就只能傳入一個 object 參數(shù)，該方法功能是將該 object 合并到調(diào)用 extend 方法的對象中。
我們通常會使用這種方式來對 jQuer進行一些方法上的擴展。
引子
jQurey 提供了兩種方法擴張方式，分別為jQuery.fn.extend(object)和jQuery.extend(object).
想要搞清楚兩種擴展方式之間的區(qū)別的話，先要了解什么是jQuery.fn.
本猿參考了 jQuery 的源碼，發(fā)現(xiàn)其中玄機：
jQuery.fn = jQuery.prototype = {
init: function(selector, context) {
// ...
};
}
jQuery.fn = jQuery.prototype這句代碼明確指出jQuery.fn指代的就是 jQuery 的原型。
其次，我們要引入兩個概念 類方法 和 實例方法 。
類方法 是直接可以使用類引用，不需要實例化就可以使用的方法。一般在項目中 類方法 都是被設(shè)置為工具類使用；
-
實例方法 必須先創(chuàng)建實例，然后才能通過實例調(diào)用該 實例方法 。
jQuery可以看做是這個封裝得非常好的類，而我們可以使用jQuery選擇器來創(chuàng)建 jQuery 的實例。比如：使 id 選擇器$('#btn')來創(chuàng)建一個實例。
區(qū)別
jQuery.extend(object)相當于對 類方法 的擴展。
jQuery.extend({
/* 返回兩個元素中較小的值 */
min: function(a, b) {
return a < b ? a : b;
},
/* 返回兩個元素中較大的值 */
max: function(a, b) {
return a > b ? a : b;
}
});
jQuery.min(2, 3); // 2
jQuery.max(4, 5); // 5
jQuery.fn.extend(object)是對jQuery.prototype上的擴展。
jQuery.fn.extend = jQuery.prototype.extend
這種方式相當對 實例方法 的擴展。
舉個栗子：
開發(fā)一個簡單的小功能，使用該方法可以使選定元素內(nèi)的文字變紅。
$.fn.extend({
setRed: function() {
$(this).css("color", "red");
}
});
$('.tip').setRed();
$(".tip")創(chuàng)建了一個jQuery實例，通過它可以調(diào)用成員方法setRed.
上述代碼可以實現(xiàn)預(yù)想的擴展，但最好返回this 以滿足 jQuery 鏈式操作 的需要。
改良之后，代碼如下：
$.fn.extend({
red: function() {
return $(this).css("color", "red");
}
});
