jQuery.fn和jQuery.prototype區別介紹_jquery

近期在讀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 = { jQuery.fn = jQuery.prototype = { init: function( selector, context, rootjQuery ) {
// something to do
}
};

// Give the init function the jQuery prototype for later
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);

這裡我們可以看到： 複製程式碼

程式碼如下:
varQuery = function ( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery 其實jQuery.fn.init(init(init())。那麼jquery.fn.init()回傳的又是什麼呢？

複製程式碼 程式碼如下:

jQuery.fn = jQuery.pro>

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

}
};

就是從這裡來的，一個javascript物件。 這裡有個問題。

複製程式碼

程式碼如下:


jQuery.fn >
那麼就是將jQuery 的原型物件賦值給了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