jQuery.fn和jQuery.prototype區(qū)別介紹

更新時(shí)間：2013年10月05日 15:24:39 作者：

jQuery.fn和jQuery.prototype想必大家對(duì)它并不陌生吧，那么你們知道它們之間的區(qū)別嗎？在本文有個(gè)不錯(cuò)的示例大家可以參考下

近期在讀jQuery的源碼。

發(fā)現(xiàn)這里有個(gè)東西很難理解。

這里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么。

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

復(fù)制代碼代碼如下:

 
(function( window, undefined ) { 

var jQuery = (function() { 
// 構(gòu)建jQuery對(duì)象 
var jQuery = function( selector, context ) { 
return new jQuery.fn.init( selector, context, rootjQuery ); 
} 

// jQuery對(duì)象原型 
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; 

// 合并內(nèi)容到第一個(gè)參數(shù)中，后續(xù)大部分功能都通過該函數(shù)擴(kuò)展 
// 通過jQuery.fn.extend擴(kuò)展的函數(shù)，大部分都會(huì)調(diào)用通過jQuery.extend擴(kuò)展的同名函數(shù) 
jQuery.extend = jQuery.fn.extend = function() {}; 

// 在jQuery上擴(kuò)展靜態(tài)方法 
jQuery.extend({ 
// something to do 
}); 

// 到這里，jQuery對(duì)象構(gòu)造完成，后邊的代碼都是對(duì)jQuery或jQuery對(duì)象的擴(kuò)展 
return jQuery; 

})(); 

window.jQuery = window.$ = jQuery; 
})(window); 

這里我們可以看到：

復(fù)制代碼代碼如下:

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

jQuery 其實(shí)jQuery.fn.init()返回一個(gè)對(duì)象。那么jquery.fn.init()返回的又是什么呢？

復(fù)制代碼代碼如下:

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

就是從這里來的，一個(gè)javascript對(duì)象。

這里有個(gè)問題。

復(fù)制代碼代碼如下:

jQuery.fn = jQuery.prototype

那么就是將jQuery 的原型對(duì)象賦值給了 jQuery.fn。

再看下面：

復(fù)制代碼代碼如下:

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

看到這里我有一個(gè)想法。就是將jQuery.fn 給了 jQuery.fn.init.prototype.

那么在這之前jQuery.fn.init.prototype.是什么？

是不是沒有？這個(gè)時(shí)候它的原型是{};

那么為了可以去調(diào)用init外面的方法。就做了一個(gè)處理。

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

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

賦值了以后。在調(diào)用的時(shí)候，當(dāng)init中沒有方法的時(shí)候，就會(huì)去原型函數(shù)中調(diào)用。

那么這樣的話。

你可能會(huì)想到這樣一個(gè)東東：

復(fù)制代碼代碼如下:

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

我想你應(yīng)該明白它們的區(qū)別了吧。

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

這就是為什么jQuery.fn.extends()中的大部分方法來自己于jQuery.extends()。

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

那么就有這樣的一個(gè)關(guān)系：

復(fù)制代碼代碼如下:

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

您可能感興趣的文章: