jQuery中原型分析

本文參考代碼爲jQuery 2.0.3

使用jQuery時，都是相似於$('XXX').xxx()的用法，那麼先來找找$

在jQuery源碼最後幾行能夠看到:  (代碼8826行）

window.jQuery = window.$ = jQuery;

在這步中將 $ 也就是 jQuery  掛載到了window對象上 , 因此能夠在頁面上直接使用$() , 接下來找找jQuery函數的定義

源碼60行位置能夠看到以下：（代碼60行）

jQuery = function( selector, context ) {
	return new jQuery.fn.init( selector, context, rootjQuery );
},

在這裏定義了一個叫jQuery的函數變量，在這裏用new返回了一個實例對象，這樣作就使得使用jQuery時不用new進行實例化了，只須要$()就建立了實例對象，

那麼接着去看看這個init函數，因爲jQuery中的init函數很是複雜，這裏進行下簡寫,只考慮選擇器爲ID的狀況（代碼96行）

jQuery.fn = jQuery.prototype = {
    init: function( selector, context, rootjQuery ) {
	var elem,match;
        var rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
        match = rquickExpr.exec( selector );
        elem = document.getElementById( match[2] );
	if ( elem && elem.parentNode ) {
	　　this.length = 1;
	　　this[0] = elem;
	}
	this.context = document;
	this.selector = selector;
	return this;
    }
}    

jQuery.fn在這充當jQuery.prototype別名的做用，在jQuery.prototype中的init函數返回了一個數組，裏面放着指定ID的引用，到了這裏就實現了 $('#ID')

jQuery.fn.init是構造函數的話原型方法就應該在jQuery.fn.init.prototype中，然而jQuery中分爲靜態方法和實例方法，全部實例方法放在了jQuery.fn中，這些實例方法也便是$('#'ID).xx()中那個xx，在jQuery源碼init函數下方緊跟着就對原型進行了修改  （代碼283行）

jQuery.fn.init.prototype = jQuery.fn;　　

到這裏也就把jQuery的原型對象賦值給了init的原型，所以使用$()返回的對象就能夠使用jQuery原型上的方法了。

 

更多jquery分析能夠參考 http://nuysoft.iteye.com/blog/1190542