近期在讀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
