分析jQuery創(chuàng)建實(shí)例與原型繼承是怎么處理的

Dreamweaver jQuery智能提示插件1.2.0

• 類型：編程輔助大小：109KB語(yǔ)言：中文 評(píng)分：5.0
• 標(biāo)簽：

立即下載

　　在普通情況下我們要用原生類、或者自定義類創(chuàng)建實(shí)例要用new運(yùn)算符，使構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例，并且實(shí)例繼承構(gòu)造器prototype上的所有公有方法。如 new Object()、new Date()等等�。╫bject有{}，數(shù)組有[]這樣的快捷方式 ，我們主要探討new這種方式。）

　　我們?cè)谑褂胘Query時(shí)從來(lái)沒(méi)有使用過(guò)new，他是不是用其他方法來(lái)生成實(shí)例呢？是不是沒(méi)有使用prototype屬性呢？事實(shí)上他都有使用，只是內(nèi)部處理的非常巧妙，提高了使用的爽快度。我們來(lái)看看他的源碼

funtion jQuery( selector, context){

　　return new jQuery.fn.init( selector, context );
}　　

　　這里可以看出jQuery是有構(gòu)造函數(shù)的，也是用了new 創(chuàng)建實(shí)例的。那么jQuery.fn是什么呢？后面有個(gè)這樣的處理：

jQuery.fn = jQuery.prototype={
       init：function (){}
}　

　　這樣我們就明白了,jQuery的構(gòu)造函數(shù)是他原型上的init方法，而不是function jQuery。這樣的話每次調(diào)用$()他都會(huì)用jQuery原型上的init創(chuàng)建一個(gè)實(shí)例，那么新的問(wèn)題來(lái)了。如果用init創(chuàng)建實(shí)例的話，這個(gè)對(duì)象繼承的是init的prototype上的方法而不會(huì)繼承jQuery prototype上的方法，那么他是怎么實(shí)現(xiàn)原型繼承的呢？

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

　　這里他有一個(gè)這樣的處理，把jQuery.fn賦值給了jQuery.fn.init.prototype ，這一步很關(guān)鍵。我門看看這些是什么。

jQuery.fn是jQuery.prototype

jQuery.fn.init.prototype是jQuery.prototype.init.prototype

　　這個(gè)處理相當(dāng)于

jQuery.prototype = jQuery.prototype.init.prototype

　　那么每當(dāng)我們調(diào)用$()是，jQuery就會(huì)用new運(yùn)算符調(diào)用他prototype上的init創(chuàng)建一個(gè)實(shí)例，這個(gè)由init創(chuàng)建實(shí)例會(huì)繼承jQuery protype上的所有方法，并且這個(gè)實(shí)例的__proto__內(nèi)部屬性會(huì)指向jQuery的prototype屬性。

　　另外我們注意到這個(gè)處理：

jQuery.fn = jQuery.prototype

這是他為了避免頻繁的操作jQuery.prototype，所以用jQuery.fn緩存了jQuery.prototype。

　　　　這些的處理實(shí)在是非常巧妙，內(nèi)部處理了實(shí)例創(chuàng)建不用使用者用new去生成實(shí)例，又非常漂亮的處理了prototype保證多實(shí)例共享方法減少資源開支，約翰哥真的不簡(jiǎn)單。