(詳解)你應(yīng)該知道的new操作符

y1chuan 發(fā)布于2019-08-22 18:16 / 2122人閱讀

摘要：使用指定的參數(shù)調(diào)用構(gòu)造函數(shù)，并將綁定到新創(chuàng)建的對(duì)象。等同于，也就是沒有指定參數(shù)列表，不帶任何參數(shù)調(diào)用的情況。由構(gòu)造函數(shù)返回的對(duì)象就是表達(dá)式的結(jié)果。

new

作為大家天天使用的操作符，想必大家都不陌生

創(chuàng)建一個(gè)對(duì)象的通用語法

let obj = new Object();

那么在創(chuàng)建對(duì)象的過程中，new 到底做了什么?

MDN

當(dāng)代碼 new Foo(...) 執(zhí)行時(shí)，會(huì)發(fā)生以下事情：(MDN地址)

一個(gè)繼承自 Foo.prototype 的新對(duì)象被創(chuàng)建。

使用指定的參數(shù)調(diào)用構(gòu)造函數(shù) Foo ，并將 this 綁定到新創(chuàng)建的對(duì)象。new Foo 等同于 new Foo()，也就是沒有指定參數(shù)列表，F(xiàn)oo 不帶任何參數(shù)調(diào)用的情況。

由構(gòu)造函數(shù)返回的對(duì)象就是 new 表達(dá)式的結(jié)果。如果構(gòu)造函數(shù)沒有顯式返回一個(gè)對(duì)象，則使用步驟1創(chuàng)建的對(duì)象。（一般情況下，構(gòu)造函數(shù)不返回值，但是用戶可以選擇主動(dòng)返回對(duì)象，來覆蓋正常的對(duì)象創(chuàng)建步驟）

按照這個(gè)過程，我們可以大概的模擬一個(gè)new的實(shí)現(xiàn)

function _new(Super) {
    //返回一個(gè)function
    return (props)=> {
        let obj = {}; //創(chuàng)建一個(gè)新對(duì)象
        obj.__proto__ = Super.prototype;//繼承父類的屬性
        let result = Super.apply(obj,props);//調(diào)用Super的構(gòu)造函數(shù)
        return typeof result === "object"? result : obj;; //判斷Super構(gòu)造器總返回一個(gè)Object
    }
}

var a = _new(Super)(["z"])
a;//{name: "z"}

ECMA-262

再次閱讀Ecma262
其過程較MDN多了一些判斷，如：

new Object ( [ value ] )
當(dāng)以一個(gè)參數(shù) value 或者無參數(shù)調(diào)用 Object 構(gòu)造器，采用如下步驟：

如果提供了 value, 則
a.如果 Type(value) 是 Object, 則

  (1)如果 value 是個(gè)原生 ECMAScript 對(duì)象 , 不創(chuàng)建新對(duì)象，簡單的返回 
  value.
  (2)如果 value 是宿主對(duì)象 , 則采取動(dòng)作和返回依賴實(shí)現(xiàn)的結(jié)果的方式可以使 
  依賴于宿主對(duì)象的 .

b.如果 Type(value) 是 String, 返回 ToObject(value).
c.如果 Type(value) 是 Boolean, 返回 ToObject(value).
d.如果 Type(value) 是 Number, 返回 ToObject(value).

斷言 : 未提供參數(shù) value 或其類型是 Null 或 Undefined.

令 obj為一個(gè)新創(chuàng)建的原生 ECMAScript 對(duì)象 .

設(shè)定 obj 的 [[Prototype]] 內(nèi)部屬性為標(biāo)準(zhǔn)內(nèi)置的 Object 的 prototype 對(duì)象.

設(shè)定 obj 的 [[Class]] 內(nèi)部屬性為 "Object".

設(shè)定 obj 的 [[Extensible]] 內(nèi)部屬性為 true.

設(shè)定 obj 的 8.12 指定的所有內(nèi)部方法

返回 obj.

重新來修改下我們的模擬

function _new(Super) {
    //返回一個(gè)function
    return (value) => {
        if (value) {
            switch (typeof value) {
                case "object":
                    //這里因?yàn)椴煌乃拗鳝h(huán)境也就是不同的引擎會(huì)有不同的寫法，找了很多博文書籍也沒有詳解具體的判斷邏輯或方法，只好先寫偽代碼了
                    if (宿主對(duì)象) {
                        //采取動(dòng)作和返回依賴實(shí)現(xiàn)的結(jié)果的方式可以使依賴于宿主對(duì)象的
                    } else {
                        return value
                    }
                    break;
                case "string":
                    return new String(value);
                    break;
                case "boolean":
                    return new Boolean(value);
                    break;
                case "number":
                    return new Number(value);
                    break;
                default:
                    break;
            }
        }
        let obj = {}; //創(chuàng)建一個(gè)新對(duì)象
        obj.__proto__ = Super.prototype; //繼承父類的屬性
        //修改內(nèi)部屬性class 為 “Object”，不過ecma262沒有提供任何方法去修改，只提供了一種訪問方法 Object.prototype.toString.call("我們的對(duì)象")
        //修改內(nèi)部屬性Extensible為 true，不過目前沒有提供方法去修改，只有一個(gè)修改為false Object.preventExtensions("我們的對(duì)象");
        let result = Super.apply(obj, value); //調(diào)用Super的構(gòu)造函數(shù)
        return typeof result === "object" ? result : obj;; //判斷Super構(gòu)造器總返回一個(gè)Object
    }
}

var a = _new(Super)(["z"])
a; //{name: "z"}

歡迎補(bǔ)充