如何本身實現 JavaScript 的 new 操做符？

前言

new 你們確定都不陌生，單身沒有對象的時候就 new 一個，很方便。那麼它在建立實例的時候，具體作了哪些操做呢？今天咱們就來一塊兒分析一下。

構造函數

在介紹 new 以前，必需要知道什麼是構造函數。

構造函數和普通函數在寫法上沒有任何區別，當一個函數經過 new Fun() 調用時，就叫作構造函數，構造函數首字母一般大寫。

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

let u = new User('leo');

這裏，User 就是構造函數，固然你也能夠直接調用 User()，可是這樣就起不到建立實例的做用，在非嚴格模式下，會把 name 屬性掛在 window 上。

new 操做符

那麼 new 操做符到底作了什麼事情呢，能夠建立出一個實例？

new 運算符建立一個用戶定義的對象類型的實例或具備構造函數的內置對象的實例。new關鍵字會進行以下的操做：

1. 建立一個空的簡單JavaScript對象（即**{}**）；
2. 連接該對象（即設置該對象的構造函數）到另外一個對象 ；
3. 將步驟1新建立的對象做爲**this**的上下文 ；
4. 若是該函數沒有返回對象，則返回**this**。

以上引用自 new 操做符 - MDN

可能第 二、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 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，會有一種通透的感受了。