new操作符的基本過程：

1.創(chuàng)建一個(gè)新的空對(duì)象。

2.將構(gòu)造函數(shù)的作用域賦給它（即this指向它）。

3.新對(duì)象增加構(gòu)造函數(shù)的基本方法和屬性。

4.返回新對(duì)象

上面的過程大家應(yīng)該都熟悉，本文是重學(xué) JS 系列的第一篇文章，寫這個(gè)系列的初衷也是為了夯實(shí)自己的 JS 基礎(chǔ)。既然是重學(xué)，肯定不會(huì)從零開始介紹一個(gè)知識(shí)點(diǎn)，如有遇到不會(huì)的內(nèi)容請(qǐng)自行查找資料。

new 的作用

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

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'

從上面一個(gè)例子中我們可以得出這些結(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），如果我們讓它返回值會(huì)發(fā)生什么事情呢？

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

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

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

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

試完了返回原始值，我們?cè)賮碓囋嚪祷貙?duì)象會(huì)發(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'

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

那么通過這個(gè)例子，我們?cè)俅蔚贸隽艘粋€(gè)結(jié)論：

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

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

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

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

首先我們?cè)賮砘仡櫹?new 操作符的幾個(gè)作用

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

回顧了這些作用，我們就可以著手來實(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
}

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

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

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

最后

我們通過這篇文章重學(xué)了 new 操作符，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論