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

來源：懂視網責編：小采時間：2020-11-27 22:00:25

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

JS重學系列之聊聊new操作符:new操作符的基本過程： 1.創建一個新的空對象。 2.將構造函數的作用域賦給它（即this指向它）。 3.新對象增加構造函數的基本方法和屬性。 4.返回新對象上面的過程大家應該都熟悉，本文是重學 JS 系列的第一篇文章，寫這個系列的初衷也是為了夯實自己的 J

推薦度：

點擊下載本文 文檔為doc格式

導讀JS重學系列之聊聊new操作符:new操作符的基本過程： 1.創建一個新的空對象。 2.將構造函數的作用域賦給它（即this指向它）。 3.新對象增加構造函數的基本方法和屬性。 4.返回新對象上面的過程大家應該都熟悉，本文是重學 JS 系列的第一篇文章，寫這個系列的初衷也是為了夯實自己的 J

通過以上幾個例子，相信大家也大致了解了 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 操作符，

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com