如何自己實現 JavaScript 的 new 操作符？
- 2020 年 3 月 27 日
- 筆記
前言
new 大家肯定都不陌生，單身沒有對象的時候就 new 一個，很方便。那麼它在創建實例的時候，具體做了哪些操作呢？今天我們就來一起分析一下。
構造函數
在介紹 new 之前，必須要知道什麼是構造函數。
構造函數和普通函數在寫法上沒有任何區別，當一個函數通過 new Fun() 調用時，就叫做構造函數，構造函數首字母通常大寫。
function User(name) { this.name = name; } let u = new User('leo'); 複製程式碼
這裡，User 就是構造函數，當然你也可以直接調用 User()，但是這樣就起不到創建實例的作用，在非嚴格模式下，會把 name 屬性掛在 window 上。
new 操作符
那麼 new 操作符到底做了什麼事情呢，可以創建出一個實例？
new運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。**new**關鍵字會進行如下的操作：
- 創建一個空的簡單JavaScript對象（即
**{}**）； - 鏈接該對象（即設置該對象的構造函數）到另一個對象 ；
- 將步驟1新創建的對象作為
**this**的上下文 ； - 如果該函數沒有返回對象，則返回
**this**。
以上引用自 new 操作符 – MDN
可能第 2、4 步大家看的不是很明白，這裡我重新總結一下這 4 個步驟：
- 創建一個空對象
u = {} - 綁定原型，
u.__proto__ = User.prototype - 調用
User()函數，並把空對象u當做this傳入，即User.call(u) - 如果
User()函數執行完自己return一個object類型，那麼返回此變數，否則返回this，注意：如果構造函數返回基本類型值，則不影響，還是返回this
自己實現一個 new
知道了 new 操作符的原理，下面我們自己來實現一個 FakeNew 函數。
function FakeNew() { let obj = {}; // 將類數組 arguments 轉為數組，同時將第一個參數也就是構造函數 shift 出來 let Constructor = [].shift.apply(arguments); // 綁定原型 obj.__proto__ = Constructor.prototype; // 調用構造函數，將 obj 當做 this 傳入 let res = Constructor.apply(obj, arguments); // 返回 return typeof res === 'object' ? res : obj; } function User(name) { this.name = name; } User.prototype.getName = function() { return this.name; } let u = FakeNew(User, 'leo'); console.log(u); console.log(u.getName()); 複製程式碼
相應關鍵步驟的注釋已經附在程式碼裡面了，這樣我們就實現了一個 new 操作，相信大家以後再看到 new，會有一種通透的感覺了。
