前言

new大家肯定都不陌生，單身沒有物件的時候就new一個，很方便。那麼它在建立例項的時候，具體做了哪些操作呢？今天我們就來一起分析一下。

建構函式

在介紹new之前，必須要知道什麼是建構函式。

建構函式和普通函式在寫法上沒有任何區別，當一個函式通過new Fun()呼叫時，就叫做建構函式，建構函式首字母通常大寫。

function User(name) {
    this.name = name;
}

let u = new User('leo');

這裡，User就是建構函式，當然你也可以直接呼叫User()，但是這樣就起不到建立例項的作用，在非嚴格模式下，會把name屬性掛在window上。

new 操作符

那麼new操作符到底做了什麼事情呢，可以創建出一個例項？

new運算子建立一個使用者定義的物件型別的例項或具有建構函式的內建物件的例項。new關鍵字會進行如下的操作：

廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com

1. 建立一個空的簡單JavaScript物件（即**{}**）；
2. 連結該物件（即設定該物件的建構函式）到另一個物件 ；
3. 將步驟1新建立的物件作為**this**的上下文 ；
4. 如果該函式沒有返回物件，則返回**this**。

以上引用自new 操作符 - MDN

可能第 2、4 步大家看的不是很明白，這裡我重新總結一下這 4 個步驟：

1. 建立一個空物件u = {}
2. 繫結原型，u.__proto__ = User.prototype
3. 呼叫User()函式，並把空物件u當做this傳入，即User.call(u)
4. 如果User()函式執行完自己return一個object型別，那麼返回此變數，否則返回this，注意：如果建構函式返回基本型別值，則不影響，還是返回this

自己實現一個 new

知道了new操作符的原理，下面我們自己來實現一個FakeNew函式。

function FakeNew() {
    let obj = {};
  
    // 將類陣列 arguments 轉為陣列，同時將第一個引數也就是建構函式 shift 出來
    let const
 
ructor = [].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，會有一種通透的感覺了。