new 的作用
我們先來通過兩個例子來了解 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'
復制代碼
從上面一個例子中我們可以得出這些結(jié)論：
new通過構(gòu)造函數(shù)Test創(chuàng)建出來的實例可以訪問到構(gòu)造函數(shù)中的屬性new通過構(gòu)造函數(shù)Test創(chuàng)建出來的實例可以訪問到構(gòu)造函數(shù)原型鏈中的屬性盔粹，也就是說通過new操作符坤塞，實例與構(gòu)造函數(shù)通過原型鏈連接了起來
但是當下的構(gòu)造函數(shù) Test 并沒有顯式 return 任何值（默認返回 undefined）慢味，如果我們讓它返回值會發(fā)生什么事情呢？
function Test(name) {
this.name = name
return 1
}
const t = new Test('yck')
console.log(t.name) // 'yck'
復制代碼
雖然上述例子中的構(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ā)現(xiàn)枯怖，雖然構(gòu)造函數(shù)內(nèi)部的 this 還是依舊正常工作的注整，但是當返回值為對象時，這個返回值就會被正常的返回出去度硝。
那么通過這個例子肿轨，我們再次得出了一個結(jié)論：
- 構(gòu)造函數(shù)如果返回值為對象，那么這個返回值會被正常使用
這兩個例子告訴了我們一點蕊程，構(gòu)造函數(shù)盡量不要返回值椒袍。因為返回原始值不會生效，返回對象會導致 new 操作符沒有作用藻茂。
通過以上幾個例子驹暑，相信大家也大致了解了 new 操作符的作用了，接下來我們就來嘗試自己實現(xiàn) new 操作符辨赐。
自己實現(xiàn) new 操作符
首先我們再來回顧下 new 操作符的幾個作用
-
new操作符會返回一個對象优俘，所以我們需要在內(nèi)部創(chuàng)建一個對象 - 這個對象，也就是構(gòu)造函數(shù)中的
this掀序，可以訪問到掛載在this上的任意屬性 - 這個對象可以訪問到構(gòu)造函數(shù)原型上的屬性帆焕，所以需要將對象與構(gòu)造函數(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ù)為構(gòu)造函數(shù)换吧，接下來的參數(shù)被構(gòu)造函數(shù)使用
- 然后內(nèi)部創(chuàng)建一個空對象
obj - 因為
obj對象需要訪問到構(gòu)造函數(shù)原型鏈上的屬性浑娜，所以我們通過setPrototypeOf將兩者聯(lián)系起來。這段代碼等同于obj.__proto__ = Con.prototype - 將
obj綁定到構(gòu)造函數(shù)上式散，并且傳入剩余的參數(shù) - 判斷構(gòu)造函數(shù)返回值是否為對象筋遭，如果為對象就使用構(gòu)造函數(shù)返回的值，否則使用
obj，這樣就實現(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'
復制代碼
雖然實現(xiàn)代碼只有寥寥幾行编饺，但是結(jié)果很完美
image.png
最后
我們通過這篇文章重學了 new 操作符，如果你還有什么疑問歡迎在評論區(qū)與我互動响驴。
