亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

分離構造器

通過new操作符構建一個對象,一般經過四步:

  A.創建一個新對象

  B.將構造函數的作用域賦給新對象(所以this就指向了這個新對象)

  C.執行構造函數中的代碼

  D.返回這個新對象

最后一點就說明了,我們只要返回一個新對象即可。其實new操作符主要是把原型鏈跟實例的this關聯起來,這才是最關鍵的一點,所以我們如果需要原型鏈就必須要new操作符來進行處理。否則this則變成window對象了。

 

我們來剖析下jQuery的這個結構,以下是我們常見的類式寫法:

var $$ = ajQuery = function(selector) {
    this.selector = selector;
    return this
}
ajQuery.fn = ajQuery.prototype = {
    selectorName:function(){
        return this.selector;
    },
    constructor: ajQuery
}
var a = new $$('aaa');  //實例化
a.selectorName() //aaa //得到選擇器名字

 

首先改造jQuery無new的格式,我們可以通過instanceof判斷this是否為當前實例:

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

這樣會無限遞歸自己,從而造成死循環并且溢出。

jQuery為了避免出現這種死循環的問題,采取的手段是把原型上的一個init方法作為構造器

var $$ = ajQuery = function(selector) {
    //把原型上的init作為構造器
    return new ajQuery.fn.init( selector );
}

ajQuery.fn = ajQuery.prototype = {
    name: 'aaron',
    init: function() {
        console.log(this)
    },
    constructor: ajQuery
}

這樣確實解決了循環遞歸的問題,但是又問題來了,init是ajQuery原型上作為構造器的一個方法,那么其this就不是ajQuery了,所以this就完全引用不到ajQuery的原型了,所以這里通過new把init方法與ajQuery給分離成2個獨立的構造器。

任務

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?