new 的實現原理

本身封裝一個new

<script>
    // 建立一個構造函數
    function Father() {
      this.name = '小紅';
      this.eat = function () {
        console.log('我叫'+this.name);
      }
    }
    /**
     * 一、在內存中建立一個新的對象；
     * 二、讓this指向這個新的對象；
     * 三、執行構造函數裏面的代碼並給這個對象添加屬性和方法；
     * 四、返回這個新對象；
     */
    // 使用new關鍵字來建立一個對象；
    var fa = new Father()
    console.log(fa);

    // ----------------------------------------

    /**
     * 實現new的過程
     */
    function _new() {
      // 一、建立一個空對象；
      var obj = {}

      // 利用 es6 數組的結構特色能夠把函數的參數結構出來
      var [newfn, ...args] = [...arguments]

      // 二、將該對象 obj 的原型鏈 __proto__ 指向構造函數的原型 prototype，
      obj.__proto__ = newfn.prototype

      // 而且在原型鏈 __proto__ 上設置構造函數 constructor 爲要實例化的 newfn
      obj.__proto__.constructor = newfn

      // 三、讓構造函數 newfn 的this改變指向到 obj，並執行
      var result = newfn.call(obj, ...args)

      // 四、若是newfn執行後返回的是對象或函數類型，則返回該對象，不然返回 obj
      if (
        result &&
        (typeof result === 'object' || typeof result === 'function')
      ) {
        return result
      }
      return obj
    }

    // 構造函數；
    function f1(name, age) {
      this.name = name
      this.age = age
      this.eat = function() {
        return '我叫' + this.name + '今年' + this.age + '歲'
      }
    }

    // 建立一個對象；
    var obj2 = _new(f1, '小明', 18)
    console.log(obj2)
    console.log(obj2.name)  // 小明
    console.log(obj2.eat()) // 我叫小明今年18歲

  </script>