js new操作符

簡(jiǎn)單實(shí)現(xiàn)

其實(shí)new操作符實(shí)現(xiàn)還是很簡(jiǎn)單的淮菠,因?yàn)镸dn上總共也就是4句話(huà)來(lái)描述它的作用

  1. 創(chuàng)建一個(gè)空的簡(jiǎn)單JavaScript對(duì)象(即{});
  2. 為步驟1新創(chuàng)建的對(duì)象添加屬性 proto 丽惭,將該屬性鏈接至構(gòu)造函數(shù)的原型對(duì)象 ;
  3. 將步驟1新創(chuàng)建的對(duì)象作為this的上下文 ;
  4. 如果該函數(shù)沒(méi)有返回對(duì)象信殊,則返回this

我們首先來(lái)依次用代碼來(lái)翻譯上面的四句話(huà)

function newOperator() {
  // 創(chuàng)建對(duì)象
  const obj = {}
  // 創(chuàng)建的對(duì)象添加屬性__proto__,并指向構(gòu)造函數(shù)的原型對(duì)象
  obj.__proto__ = Constructor.prototype
  // 創(chuàng)建的對(duì)象作為this的上下文,并獲取返回值
  const ret = Constructor.apply(obj, arguments)
  // 如果該函數(shù)沒(méi)有返回對(duì)象汁果,則返回新創(chuàng)建的對(duì)象
  return typeof ret === "object" ? ret : obj;
}

上面的代碼已經(jīng)很好的翻譯了上面的四句話(huà)涡拘,但是我們卻不能直接用來(lái)創(chuàng)建構(gòu)造函數(shù)的實(shí)例,因?yàn)槲覀兏緵](méi)有把構(gòu)造函數(shù)傳進(jìn)去据德,即上面的代碼是無(wú)法運(yùn)行的鳄乏,因?yàn)?strong>Constructor并沒(méi)有定義

代碼完善

那么就讓我們來(lái)重新完善一下上面的代碼, 步驟如下:

  • 首先新增參數(shù)棘利,即需要實(shí)例的構(gòu)造函數(shù)
function newOperator(ctor) {}
  • 判斷ctor參數(shù)類(lèi)型橱野,是否是function類(lèi)型,否則拋出錯(cuò)誤
if (typeof ctor !== "function") {
    throw '參數(shù)異常赡译,只接收構(gòu)造函數(shù)'
  }
  • 新建實(shí)例為對(duì)象添加__proto仲吏,并指向構(gòu)造函數(shù)的原型對(duì)象
  // 創(chuàng)建對(duì)象
  const obj = {}
  // 創(chuàng)建的對(duì)象添加屬性__proto__,并指向構(gòu)造函數(shù)的原型對(duì)象
  obj.__proto__ = Constructor.prototype
  
  // 上面的代碼等同于如下代碼
  const obj = Object.create(ctor.prototype)
  
  • 處理參數(shù)
  const params = [].slice.call(arguments, 1)
  const result = ctor.apply(obj, params)

此處解釋一下為什么要處理一下參數(shù)

function Dog (name, age) {
  this.name = name
  this.age = age
}
const maomao = newOperator(Dog, 'maomao', 2)

從上面的代碼可以看出來(lái),我們使用newOperator的時(shí)候,第一個(gè)參數(shù)是構(gòu)造函數(shù)裹唆,所以需要把第一個(gè)參數(shù)截取掉誓斥,獲取到的參數(shù)就是['maomao', 2],這兩個(gè)才是構(gòu)造函數(shù)的參數(shù)

  • 改變this上下文并獲取構(gòu)造的返回結(jié)果
const result = ctor.apply(obj, params)

為什么要獲取構(gòu)造的返回結(jié)果许帐?劳坑?

因?yàn)橥ǔ?lái)說(shuō)實(shí)現(xiàn)構(gòu)造函數(shù)是不需要return來(lái)返回結(jié)果的,但是如果真的給構(gòu)造函數(shù)添加return關(guān)鍵字并返回結(jié)果成畦,我們也應(yīng)該返回這個(gè)結(jié)果,像如下代碼

function Cat(name, age) {
    return {
        name: name,
        age: age
    }
}
  • 判斷類(lèi)型并返回
const isObject = typeof result === 'object'
  const isFunction = typeof result === 'function'
  if (isFunction || isObject) {
    return result
  }
  return obj

完整代碼

function newOperator(ctor) {
  if (typeof ctor !== "function") {
    throw '參數(shù)異常距芬,只接收構(gòu)造函數(shù)'
  }
  const obj = Object.create(ctor.prototype)
  const params = [].slice.call(arguments, 1)
  const result = ctor.apply(obj, params)
  const isObject = typeof result === 'object'
  const isFunction = typeof result === 'function'
  if (isFunction || isObject) {
    return result
  }
  return obj
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市循帐,隨后出現(xiàn)的幾起案子框仔,更是在濱河造成了極大的恐慌,老刑警劉巖拄养,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件离斩,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡瘪匿,警方通過(guò)查閱死者的電腦和手機(jī)跛梗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)棋弥,“玉大人核偿,你說(shuō)我怎么就攤上這事⊥缛荆” “怎么了漾岳?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)粉寞。 經(jīng)常有香客問(wèn)我蝗羊,道長(zhǎng),這世上最難降的妖魔是什么仁锯? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任耀找,我火速辦了婚禮,結(jié)果婚禮上业崖,老公的妹妹穿的比我還像新娘野芒。我一直安慰自己,他們只是感情好双炕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布狞悲。 她就那樣靜靜地躺著,像睡著了一般妇斤。 火紅的嫁衣襯著肌膚如雪摇锋。 梳的紋絲不亂的頭發(fā)上丹拯,一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音荸恕,去河邊找鬼乖酬。 笑死,一個(gè)胖子當(dāng)著我的面吹牛融求,可吹牛的內(nèi)容都是我干的咬像。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼生宛,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼县昂!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起陷舅,我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤倒彰,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后莱睁,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體狸驳,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年缩赛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片撰糠。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡酥馍,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出阅酪,到底是詐尸還是另有隱情旨袒,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布术辐,位于F島的核電站砚尽,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏辉词。R本人自食惡果不足惜必孤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瑞躺。 院中可真熱鬧敷搪,春花似錦、人聲如沸幢哨。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)捞镰。三九已至闸与,卻和暖如春毙替,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背践樱。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工厂画, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人映胁。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓木羹,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親解孙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子坑填,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 先來(lái)一段代碼 new 過(guò)程一共包括4個(gè)步驟: 1、創(chuàng)建一個(gè)新對(duì)象 2弛姜、設(shè)置原型鏈脐瑰,將空對(duì)象的原型proto指向構(gòu)造...
    Adonia汪閱讀 420評(píng)論 0 0
  • new操作符干了啥?如下 做了這四步:1.創(chuàng)建一個(gè)空的對(duì)象就是p={}或者p=new Object2.設(shè)置原型鏈p...
    鴨梨山大哎閱讀 422評(píng)論 0 6
  • new操作符新建了一個(gè)空對(duì)象廷臼,這個(gè)對(duì)象原型指向構(gòu)造函數(shù)的prototype苍在,執(zhí)行構(gòu)造函數(shù)后返回這個(gè)對(duì)象 創(chuàng)建一個(gè)空...
    D_MingYa閱讀 1,377評(píng)論 0 2
  • 前言 用過(guò)Vuejs的同學(xué)都知道,需要用new操作符來(lái)實(shí)例化荠商。 那么面試官可能會(huì)問(wèn)是否想過(guò)new到底做了什么寂恬,怎么...
    若川i閱讀 1,593評(píng)論 0 9
  • function myNew(constructorFn,...args){// 1.創(chuàng)建一個(gè)空對(duì)象const o...
    我有一條小黑狗閱讀 3,980評(píng)論 0 3