學(xué)習(xí)jQuery中,我們都知道jQuery最常用方法的就是jQuery( ),也即$( )。
jQuery( )是一個(gè)函數(shù)調(diào)用,調(diào)用的結(jié)果是返回了一個(gè)jQuery實(shí)例對(duì)象。
編寫(xiě)組件通常的做法是將組件封裝成一個(gè)對(duì)象,需要用的時(shí)候則通過(guò)new運(yùn)算符來(lái)創(chuàng)建一個(gè)實(shí)例。但是jQuery( )無(wú)須我們用new手工實(shí)例化,它會(huì)自動(dòng)返回一個(gè)實(shí)例。
要實(shí)現(xiàn)這一點(diǎn),最直接的思路就是定義這樣一個(gè)函數(shù):
這么做的問(wèn)題是出現(xiàn)了死循環(huán):
最簡(jiǎn)單的解決辦法是借助另一個(gè)構(gòu)造函數(shù):
這么做技術(shù)上并沒(méi)有什么問(wèn)題,但是jQuery的作者并沒(méi)有這么做,可能是出于某種技術(shù)潔癖或者我暫時(shí)不清楚的原因,init被定義在了jQuery函數(shù)的原型中:
通過(guò)init作為中轉(zhuǎn)站,最終return出了一個(gè)jQuery實(shí)例??瓷先ジ把胖隆?,更有“技術(shù)范”。
將上述代碼寫(xiě)在一個(gè)自執(zhí)行函數(shù)內(nèi)(形成私有作用域,避免命名空間污染),就構(gòu)成了jQuery的核心框架(簡(jiǎn)化版):
要理解上述結(jié)構(gòu)的工作原理,必須理解JavaScript基于構(gòu)造函數(shù)和原型的繼承模式。
當(dāng)函數(shù)調(diào)用表達(dá)式前出現(xiàn)了關(guān)鍵字new,這個(gè)函數(shù)就成了構(gòu)造函數(shù),此時(shí)會(huì)依次發(fā)生四件事:
1、首先一個(gè)空對(duì)象(又稱實(shí)例)被創(chuàng)建出來(lái)了。
2、該空對(duì)象繼承構(gòu)造函數(shù)的原型中的屬性和方法。這也是為什么要把方法都寫(xiě)在構(gòu)造函數(shù)的prototype里。
3、該空對(duì)象被賦值給構(gòu)造函數(shù)內(nèi)部的this對(duì)象。
4、執(zhí)行構(gòu)造函數(shù)。如果構(gòu)造函數(shù)中顯式的返回了一個(gè)對(duì)象,那么new出的就不再是新創(chuàng)建的空對(duì)象,而是return指定的對(duì)象。否則一律返回新建空對(duì)象。
于是jQuery( )的構(gòu)造原理就很清晰了:每次調(diào)用jQuery( )都返回由構(gòu)造函數(shù)init指定返回的this對(duì)象,而this對(duì)象已經(jīng)被賦值為那個(gè)新創(chuàng)建的空對(duì)象。由于把jQuery.prototype都賦給了init.prototype,所以新創(chuàng)建的空對(duì)象繼承所有jQuery的方法。
構(gòu)造函數(shù)init里面的return this其實(shí)刪掉也無(wú)妨,至于作者為啥要加這句,呃,可能是因?yàn)橹赖奶唷?/span>
文章來(lái)源:博客園