new操作符都做了什麼

哈哈哈我只是想笑發表於2019-02-16
var fun = function () {
    this.name = `peter`;
    
    return {
        name: `jack`
    };
}

var fun1 = function() {
    this.name = `peter`;
    
    return `jack`;
}

var p1 = new fun();
var p2 = new fun1();
p1.name; // jack
p2.name; // peter

為什麼p1和p2的name值不一樣，要從new操作符說起，在new的時候，程式做了以下四個建立步驟：

  1. 建立一個空物件
  2. 將所建立的物件的__ proto __指向建構函式的prototype
  3. 實行建構函式中的程式碼，建構函式中的this指向該物件
  4. 返回該物件（除非建構函式中返回了一個物件或者函式）

注意第4步，上述 fun和fun1建構函式中由於fun返回的是一個物件，所有p1等於fun中返回的物件，

fun1中返回的不是物件，所有p2.__ proto __等於fun1.prototype;

用程式碼模擬new建立過程就是

function objectFactory() {
    //把argumnets轉化為陣列
    var args = Array.prototype.slice.call(arguments);
    // 提取第一個構造物件
    var Constructor = args.shift();
    // 建立constructor例項 instance 
    var instance = Object.create(Constructor.prototype);
    // 使用apply函式執行args，把instance繫結到this
    var temp = Constructor.apply(instance, args);
    //返回物件判斷，是object 還是 null 還是例項
    return (typeof temp === `object` ||typeof temp === `function`  && temp !== null ) ? temp : instance;
}

相關文章