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

new 的作用

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

成都創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站設計、成都網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元杏花嶺做網(wǎng)站,已為上家服務,為杏花嶺各地企業(yè)和個人服務,聯(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'
復制代碼

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

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

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

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

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

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

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

試完了返回原始值，我們再來試試返回對象會發(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ā)現(xiàn)，雖然構造函數(shù)內部的 this 還是依舊正常工作的，但是當返回值為對象時，這個返回值就會被正常的返回出去。

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

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

這兩個例子告訴了我們一點，構造函數(shù)盡量不要返回值。因為返回原始值不會生效，返回對象會導致 new 操作符沒有作用。

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

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

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

new 操作符會返回一個對象，所以我們需要在內部創(chuàng)建一個對象
這個對象，也就是構造函數(shù)中的 this，可以訪問到掛載在 this 上的任意屬性
這個對象可以訪問到構造函數(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
}
復制代碼

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

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

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

重學 JS 系列：聊聊 new 操作符

最后

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

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

當前標題：重學JS系列：聊聊new操作符-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article0/hecoo.html

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

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

猜你還喜歡下面的內容