通過new操作符構(gòu)建一個(gè)對象,一般經(jīng)過四步:
A.創(chuàng)建一個(gè)新對象
B.將構(gòu)造函數(shù)的作用域賦給新對象(所以this就指向了這個(gè)新對象)
C.執(zhí)行構(gòu)造函數(shù)中的代碼
D.返回這個(gè)新對象
最后一點(diǎn)就說明了,我們只要返回一個(gè)新對象即可。其實(shí)new操作符主要是把原型鏈跟實(shí)例的this關(guān)聯(lián)起來,這才是最關(guān)鍵的一點(diǎn),所以我們?nèi)绻枰玩溇捅仨氁猲ew操作符來進(jìn)行處理。否則this則變成window對象了。
我們來剖析下jQuery的這個(gè)結(jié)構(gòu),以下是我們常見的類式寫法:
var $$ = ajQuery = function(selector) { this.selector = selector; return this } ajQuery.fn = ajQuery.prototype = { selectorName:function(){ return this.selector; }, constructor: ajQuery } var a = new $$('aaa'); //實(shí)例化 a.selectorName() //aaa //得到選擇器名字
首先改造jQuery無new的格式,我們可以通過instanceof判斷this是否為當(dāng)前實(shí)例:
var $$ = ajQuery = function(selector) { if(!(this instanceof ajQuery)){ return new ajQuery(selector); } this.selector = selector; return this }
但是注意千萬不要像下面這樣寫:
var $$ = ajQuery = function(selector) { this.selector = selector; return new ajQuery(selector); } Uncaught RangeError: Maximum call stack size exceeded
這樣會(huì)無限遞歸自己,從而造成死循環(huán)并且溢出。
jQuery為了避免出現(xiàn)這種死循環(huán)的問題,采取的手段是把原型上的一個(gè)init方法作為構(gòu)造器
var $$ = ajQuery = function(selector) { //把原型上的init作為構(gòu)造器 return new ajQuery.fn.init( selector ); } ajQuery.fn = ajQuery.prototype = { name: 'aaron', init: function() { console.log(this) }, constructor: ajQuery }
這樣確實(shí)解決了循環(huán)遞歸的問題,但是又問題來了,init是ajQuery原型上作為構(gòu)造器的一個(gè)方法,那么其this就不是ajQuery了,所以this就完全引用不到ajQuery的原型了,所以這里通過new把init方法與ajQuery給分離成2個(gè)獨(dú)立的構(gòu)造器。
請驗(yàn)證,完成請求
由于請求次數(shù)過多,請先驗(yàn)證,完成再次請求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)