new操作符的基本過程：

1.創建一個新的空對象。

2.將構造函數的作用域賦給它（即this指向它）。

3.新對象增加構造函數的基本方法和屬性。

4.返回新對象

上面的過程大家應該都熟悉，本文是重學 JS 系列的第一篇文章，寫這個系列的初衷也是為了夯實自己的 JS 基礎。既然是重學，肯定不會從零開始介紹一個知識點，如有遇到不會的內容請自行查找資料。

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'

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

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

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

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

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

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

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

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

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'

通過這個例子我們可以發現，雖然構造函數內部的 this 還是依舊正常工作的，但是當返回值為對象時，這個返回值就會被正常的返回出去。

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

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

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

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

自己實現 new 操作符

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

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

回顧了這些作用，我們就可以著手來實現功能了

function create(Con, ...args) { let obj = {} Object.setPrototypeOf(obj, Con.prototype) let result = Con.apply(obj, args) return result instanceof Object ? result : obj}

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

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

接下來我們來使用下該函數，看看行為是否和 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) // 26a.sayName() // 'yck'

雖然實現代碼只有寥寥幾行，但是結果很完美

最后

我們通過這篇文章重學了 new 操作符，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。