淺談jQuery建構函式分析_jquery

在我的上一篇文章裡面 闡述了jQuery的大致框架，知道了所有程式碼都是寫在了一個自調用匿名函數裡面，並且傳入了window對象，源碼是這樣的：

(function( window, undefined ) {...})( window );

我們透過alert(jquery) 知道它是一個對象，那麼這個對像是怎麼建構出來的呢？我們使用$(document)類似的寫法來取得元素，就好像直接呼叫了普通的方法一樣，jQuery就是普通的函數嗎？如果是建構子為什麼不是 new $(document)的常見形式呢？

其實jQuery是物件導向js函式庫，也有建構函數，每次呼叫jQuery方法是就會實例化一個jQeury對象，但是jQuery的寫法卻非常高明。

先來談談js物件導向：  js雖然不是物件導向的語言，卻又很多物件導向的寫法，這裡推薦大家看一下圖靈的《javascript高階程式設計》中的物件導向的程式設計部分。在眾多方法中比較常使用的寫法是構造加原型方式，以下舉例：

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+'说'+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('你好');// tom说你好

其實jQuery也是採用的這種方式只不過用了更聰明的寫法，一起再看看jQuery的構造函數有什麼不同

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

從原始碼可以看到在jQuery真正的函數是init方法，當我們呼叫jQuery時會傳回new init()的結果而不直接new jQuery() .

jQuery.fn是啥呢，在後面我們會看到這樣一句程式碼

jQuery.fn = jQuery.prototype = {...

這樣就很好理解了，其實jQuery.fn就是原型物件也就是說在jQuery原型裡面有一個init方法，這個方法是真正的建構子。這樣寫的好處就是不需要在寫$().init()這樣的操作，直接就初始化了，但是還有一個問題就是既然init才是構造函數那我們寫在jQuery上面的那麼方法實例不是不能調用嗎?init的實例化自然只能呼叫init的方法啦，往後看到這樣一句程式碼

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

之前講過jQuery.fn=jQuery.protype,這就意味著jQuery的原型對象賦給了init的原型，這樣jQuery的原型方法自然init也就都有了，通過這樣構造方式S使得使用jQuery方法非常簡單既不需要new jQuery()的操作也不需要手動初始化就行呼叫普通函數一樣簡單。