重學 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
}
複製代碼

這就是一個完整的實現代碼，咱們經過如下幾個步驟實現了它：

1. 首先函數接受不定量的參數，第一個參數爲構造函數，接下來的參數被構造函數使用
2. 而後內部建立一個空對象 obj
3. 由於 obj 對象須要訪問到構造函數原型鏈上的屬性，因此咱們經過 setPrototypeOf 將二者聯繫起來。這段代碼等同於 obj.__proto__ = Con.prototype
4. 將 obj 綁定到構造函數上，而且傳入剩餘的參數
5. 判斷構造函數返回值是否爲對象，若是爲對象就使用構造函數返回的值，不然使用 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 進階
• 重寫組件

最後，以爲內容有幫助能夠關注下個人公衆號 「前端真好玩」咯，會有不少好東西等着你。