上一篇分析了jquery對(duì)象的組成，這次來(lái)分析下jquery的extend方法。部分如下：

Js代碼  

1. jQuery.extend = jQuery.fn.extend = function() {  
2.      ...  
3. };  

我們可以用$.extend去擴(kuò)展自定義的對(duì)象，如：

Js代碼  

1. var myself = {name:jack};  
2. $.extend(myself, {setName:function)(n){this.name=n;} });  
3. myself.setName("tom");  

通過(guò)$.extend為對(duì)象myself添加了setName方法。但這里主要討論$.extend如何構(gòu)建jquery庫(kù)的。不知注意到上面代碼中jQuery.extend和jQuery.fn.extend是同一個(gè)函數(shù)。我們?yōu)g覽下jquery庫(kù)，發(fā)現(xiàn)有些方法是通過(guò)調(diào)用jQuery.extend擴(kuò)展的，有的則是通過(guò)調(diào)用jQuery.fn.extend擴(kuò)展的。下面分別討論：

1，通過(guò)jQuery.extend擴(kuò)展

     我們知道jQuery.extend中的jQuery類(lèi)型是function，即typeof jQuery值為字符串“function”。如果把jQuery當(dāng)成一個(gè)類(lèi)，jQuery.extend相當(dāng)于為該類(lèi)添加了靜態(tài)方法extend。靜態(tài)方法是不需要new一個(gè)實(shí)例再去調(diào)用的，通過(guò)“類(lèi)名+方法名”直接調(diào)用。即jQuery.extend(...)，jQuery又被賦值給$。因此我們更習(xí)慣$.extend(...)。

     源碼中直接調(diào)用jQuery.extend方法，只傳一個(gè)參數(shù)。如下：

Js代碼  

1. jQuery.extend({  
2.     noConflict: function( deep ) {  
3.         window.$ = _$;  
4.         if ( deep )  
5.             window.jQuery = _jQuery;  
6.         return jQuery;  
7.     },  
8.         ...  
9. });  

我們知道extend中如果只傳一個(gè)參數(shù)，那么將執(zhí)行該句：

Js代碼  

1. target = this;  

即擴(kuò)展自己，而這里的this則是function jQuery。也就是說(shuō)給function jQuery添加了許多靜態(tài)方法，這些方法都可以直接通過(guò)jQuery.xx(或$.xx)方式來(lái)調(diào)用，而不是先執(zhí)行(調(diào)用)jQuery方法再去調(diào)用xx，如$("#id").xx。也許下面這個(gè)例子更容易理解：

Js代碼  

1. function fun(){}//定義一個(gè)類(lèi)（函數(shù)）  
2.   
3. //為該類(lèi)（函數(shù)）添加一個(gè)靜態(tài)方法extend  
4. fun.extend=function(obj){  
5.     for(var a in obj)  
6.         this[a] = obj[a];//注意：這里的tihs即fun  
7. }  
8.   
9. //調(diào)用extend為該類(lèi)添加了靜態(tài)屬性name，靜態(tài)方法method1  
10. fun.extend({name:"fun",method1:function(){}});  
11.   
12. //輸出name,prototype,extend,method1  
13. console.dir(fun)  

因此，jquery中的isFunction, isArray, trim等都是靜態(tài)方法，只能通過(guò)$.isFunction, $.isArray, $.trim來(lái)調(diào)用。而不能通過(guò)$("...").isFuction, $("...").isArray, $("...").trim調(diào)用。

2，通過(guò)jQuery.fn.extend擴(kuò)展

     jQuery.fn等于jQuery.prototype，也就是說(shuō)給function jQuery的原型(prototype)上掛了個(gè)extend方法。通過(guò)調(diào)用jQuery.fn.extend(object)來(lái)擴(kuò)展時(shí)(注意只傳一個(gè)參數(shù)object)，extend函數(shù)中仍然會(huì)執(zhí)行

Js代碼  

1. target = this;  

 而這時(shí)的this則是jQuery.prototype（上面則是jQuery函數(shù)自身）。即給jQuery.prototype上添加了許多屬性，方法。當(dāng)jQuery函數(shù)執(zhí)行時(shí)，如$()或jQuery()，更多時(shí)候是$()。該函數(shù)會(huì)new一個(gè)jQuery（見(jiàn)上一篇jquery對(duì)象的組成）。這時(shí)則把擴(kuò)展的屬性，方法都附加到new生成的對(duì)象上了。也許下面這個(gè)示例更容易理解：

Js代碼  

1. function fun(){}//定義一個(gè)類(lèi)（函數(shù)）  
2.   
3. //給該類(lèi)原型上添加一個(gè)方法extned  
4. fun.prototype.extend = function(obj){  
5.     for(var a in obj)  
6.         this[a] = obj[a];//注意：這里的this即是fun.prototype  
7. }             
8.   
9. //調(diào)用extend方法給fun.prototype上添加屬性，方法  
10. fun.prototype.extend({name:"fun2",method1:function(){}})  
11.   
12. //輸出name,extend,method1  
13. console.dir(new fun())  

因此擴(kuò)展的屬性或方法都添加到j(luò)query對(duì)象上了。

如bind, one, unbind等可以通過(guò)$("...").bind, $("...").one, $("...").unbind方式調(diào)用。卻不能通過(guò) $.bind, $.one, $.unbind方式調(diào)用。

jquery庫(kù)與prototype庫(kù)一樣都是通過(guò)extend方法擴(kuò)展出整個(gè)庫(kù)的。相對(duì)來(lái)說(shuō)jqueyr的擴(kuò)展方式更難理解一些。

總結(jié)如下:

a，jQuery.extend({...})是給function jQuery添加靜態(tài)屬性或方法

b，jQuery().extend({...})是給jquery對(duì)象添加屬性或方法。

ps：這里的jQuery即為$。