重學(xué)JS系列：聊聊new操作符-創(chuàng)新互聯(lián)

new 的作用

我們先來通過兩個例子來了解 new 的作用

成都創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元杏花嶺做網(wǎng)站,已為上家服務(wù),為杏花嶺各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

function Test(name) {
  this.name = name
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const t = new Test('yck')
console.log(t.name) // 'yck'
t.sayName() // 'yck'
復(fù)制代碼

從上面一個例子中我們可以得出這些結(jié)論：

new 通過構(gòu)造函數(shù) Test 創(chuàng)建出來的實(shí)例可以訪問到構(gòu)造函數(shù)中的屬性
new 通過構(gòu)造函數(shù) Test 創(chuàng)建出來的實(shí)例可以訪問到構(gòu)造函數(shù)原型鏈中的屬性，也就是說通過 new 操作符，實(shí)例與構(gòu)造函數(shù)通過原型鏈連接了起來

但是當(dāng)下的構(gòu)造函數(shù) Test 并沒有顯式 return 任何值（默認(rèn)返回 undefined），如果我們讓它返回值會發(fā)生什么事情呢？

function Test(name) {
  this.name = name
  return 1
}
const t = new Test('yck')
console.log(t.name) // 'yck'
復(fù)制代碼

雖然上述例子中的構(gòu)造函數(shù)中返回了 1，但是這個返回值并沒有任何的用處，得到的結(jié)果還是和之前的例子完全一樣。

那么通過這個例子，我們又可以得出一個結(jié)論：

構(gòu)造函數(shù)如果返回原始值（雖然例子中只有返回了 1，但是你可以試試其他的原始值，結(jié)果還是一樣的），那么這個返回值毫無意義

試完了返回原始值，我們再來試試返回對象會發(fā)生什么事情吧

function Test(name) {
  this.name = name
  console.log(this) // Test { name: 'yck' }
  return { age: 26 }
}
const t = new Test('yck')
console.log(t) // { age: 26 }
console.log(t.name) // 'undefined'
復(fù)制代碼

通過這個例子我們可以發(fā)現(xiàn)，雖然構(gòu)造函數(shù)內(nèi)部的 this 還是依舊正常工作的，但是當(dāng)返回值為對象時，這個返回值就會被正常的返回出去。

那么通過這個例子，我們再次得出了一個結(jié)論：

構(gòu)造函數(shù)如果返回值為對象，那么這個返回值會被正常使用

這兩個例子告訴了我們一點(diǎn)，構(gòu)造函數(shù)盡量不要返回值。因?yàn)榉祷卦贾挡粫?，返回對象會?dǎo)致 new 操作符沒有作用。

通過以上幾個例子，相信大家也大致了解了 new 操作符的作用了，接下來我們就來嘗試自己實(shí)現(xiàn) new 操作符。

自己實(shí)現(xiàn) new 操作符

首先我們再來回顧下 new 操作符的幾個作用

new 操作符會返回一個對象，所以我們需要在內(nèi)部創(chuàng)建一個對象
這個對象，也就是構(gòu)造函數(shù)中的 this，可以訪問到掛載在 this 上的任意屬性
這個對象可以訪問到構(gòu)造函數(shù)原型上的屬性，所以需要將對象與構(gòu)造函數(shù)鏈接起來
返回原始值需要忽略，返回對象需要正常處理

回顧了這些作用，我們就可以著手來實(shí)現(xiàn)功能了

function create(Con, ...args) {
  let obj = {}
  Object.setPrototypeOf(obj, Con.prototype)
  let result = Con.apply(obj, args)
  return result instanceof Object ? result : obj
}
復(fù)制代碼

這就是一個完整的實(shí)現(xiàn)代碼，我們通過以下幾個步驟實(shí)現(xiàn)了它：

首先函數(shù)接受不定量的參數(shù)，第一個參數(shù)為構(gòu)造函數(shù)，接下來的參數(shù)被構(gòu)造函數(shù)使用
然后內(nèi)部創(chuàng)建一個空對象 obj
因?yàn)?obj 對象需要訪問到構(gòu)造函數(shù)原型鏈上的屬性，所以我們通過 setPrototypeOf 將兩者聯(lián)系起來。這段代碼等同于 obj.__proto__ = Con.prototype
將 obj 綁定到構(gòu)造函數(shù)上，并且傳入剩余的參數(shù)
判斷構(gòu)造函數(shù)返回值是否為對象，如果為對象就使用構(gòu)造函數(shù)返回的值，否則使用 obj，這樣就實(shí)現(xiàn)了忽略構(gòu)造函數(shù)返回的原始值

接下來我們來使用下該函數(shù)，看看行為是否和 new 操作符一致

function Test(name, age) {
  this.name = name
  this.age = age
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const a = create(Test, 'yck', 26)
console.log(a.name) // 'yck'
console.log(a.age) // 26
a.sayName() // 'yck'
復(fù)制代碼

雖然實(shí)現(xiàn)代碼只有寥寥幾行，但是結(jié)果很完美

重學(xué) JS 系列：聊聊 new 操作符

最后

我們通過這篇文章重學(xué)了 new 操作符，如果你還有什么疑問歡迎在評論區(qū)與我互動。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：重學(xué)JS系列：聊聊new操作符-創(chuàng)新互聯(lián)
文章URL：http://bm7419.com/article0/hecoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、動態(tài)網(wǎng)站、企業(yè)建站、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容