jQuery.fn和jQuery.prototype區別介紹

近期在讀jQuery的源碼。

發現這裏有個東西很難理解。

這裏的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都表明什麼。

來看下jQuery的源碼是怎麼樣定義的：

(function( window, undefined ) { 
var jQuery = (function() { 
// 構建jQuery對象 
var jQuery = function( selector, context ) { 
return new jQuery.fn.init( selector, context, rootjQuery ); 
} 
// jQuery對象原型 
jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function( selector, context, rootjQuery ) { 
// something to do 
} 
}; 
// Give the init function the jQuery prototype for later instantiation 
jQuery.fn.init.prototype = jQuery.fn; 
// 合併內容到第一個參數中，後續大部分功能都經過該函數擴展 
// 經過jQuery.fn.extend擴展的函數，大部分都會調用經過jQuery.extend擴展的同名函數 
jQuery.extend = jQuery.fn.extend = function() {}; 
// 在jQuery上擴展靜態方法 
jQuery.extend({ 
// something to do 
}); 
// 到這裏，jQuery對象構造完成，後邊的代碼都是對jQuery或jQuery對象的擴展 
return jQuery; 
})(); 
window.jQuery = window.$ = jQuery; 
})(window);

這裏咱們能夠看到：

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

jQuery 其實jQuery.fn.init()返回一個對象。那麼jquery.fn.init()返回的又是什麼呢？

jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function( selector, context, rootjQuery ) { 
// something to do 
} 
};

就是從這裏來的，一個javascript對象。

這裏有個問題。

jQuery.fn = jQuery.prototype

那麼就是 將jQuery 的原型對象賦值給了 jQuery.fn。

再看下面：

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

看到這裏我有一個想法。就是 將jQuery.fn 給了 jQuery.fn.init.prototype.

那麼在這以前jQuery.fn.init.prototype.是什麼？

是否是沒有？這個時候它的原型是{};

那麼爲了能夠去調用init外面的方法。就作了一個處理。

將jQuery.fn 賦值給jQuery.fn.init.prototype.這樣的話，

jQuery.fn.init.prototype的原型也就是jQuery的原型對象就是 jQuery.fn ( 注意jQuery = function(return new jQuery.fn.init()))。

賦值了之後。在調用的時候，當init中沒有方法的時候，就會去原型函數中調用。

那麼這樣的話。

你可能會想到這樣一個東東：

jQuery.extends() 
jQuery.fn.extends()

我想你應該明白它們的區別了吧。

jQuery.extends()是直接擴展jQuery.而jQuery.fn.extends()，很明顯是擴展的原型。

這就是爲何jQuery.fn.extends()中的大部分方法來本身於jQuery.extends()。

這裏又將 jQuery.fn 賦值給了 jQuery.fn.init.prototype.

那麼就有這樣的一個關係：

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