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

這是重學 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) // 26
a.sayName() // 'yck'
複製程式碼

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

最後

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

我所有的系列文章都會在我的 Github 中最先更新，有興趣的可以關注下。今年主要會著重寫以下三個專欄

重學 JS
React 進階
重寫元件

最後，覺得內容有幫助可以關注下我的公眾號「前端真好玩」咯，會有很多好東西等著你。

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

new 的作用

自己實現 new 操作符

最後

相關文章