DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery.fn和jQuery.prototype區別介紹
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 = {
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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved