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

y1chuan 發布于2019-08-22 18:16 / 2114人閱讀

摘要：使用指定的參數調用構造函數，并將綁定到新創建的對象。等同于，也就是沒有指定參數列表，不帶任何參數調用的情況。由構造函數返回的對象就是表達式的結果。

new

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

創建一個對象的通用語法

let obj = new Object();

那么在創建對象的過程中，new 到底做了什么?

MDN

當代碼 new Foo(...) 執行時，會發生以下事情：(MDN地址)

一個繼承自 Foo.prototype 的新對象被創建。

使用指定的參數調用構造函數 Foo ，并將 this 綁定到新創建的對象。new Foo 等同于 new Foo()，也就是沒有指定參數列表，Foo 不帶任何參數調用的情況。

由構造函數返回的對象就是 new 表達式的結果。如果構造函數沒有顯式返回一個對象，則使用步驟1創建的對象。（一般情況下，構造函數不返回值，但是用戶可以選擇主動返回對象，來覆蓋正常的對象創建步驟）

按照這個過程，我們可以大概的模擬一個new的實現

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

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

ECMA-262

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

new Object ( [ value ] )
當以一個參數 value 或者無參數調用 Object 構造器，采用如下步驟：

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

  (1)如果 value 是個原生 ECMAScript 對象 , 不創建新對象，簡單的返回 
  value.
  (2)如果 value 是宿主對象 , 則采取動作和返回依賴實現的結果的方式可以使 
  依賴于宿主對象的 .

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

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

令 obj為一個新創建的原生 ECMAScript 對象 .

設定 obj 的 [[Prototype]] 內部屬性為標準內置的 Object 的 prototype 對象.

設定 obj 的 [[Class]] 內部屬性為 "Object".

設定 obj 的 [[Extensible]] 內部屬性為 true.

設定 obj 的 8.12 指定的所有內部方法

返回 obj.

重新來修改下我們的模擬

function _new(Super) {
    //返回一個function
    return (value) => {
        if (value) {
            switch (typeof value) {
                case "object":
                    //這里因為不同的宿主環境也就是不同的引擎會有不同的寫法，找了很多博文書籍也沒有詳解具體的判斷邏輯或方法，只好先寫偽代碼了
                    if (宿主對象) {
                        //采取動作和返回依賴實現的結果的方式可以使依賴于宿主對象的
                    } 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 = {}; //創建一個新對象
        obj.__proto__ = Super.prototype; //繼承父類的屬性
        //修改內部屬性class 為 “Object”，不過ecma262沒有提供任何方法去修改，只提供了一種訪問方法 Object.prototype.toString.call("我們的對象")
        //修改內部屬性Extensible為 true，不過目前沒有提供方法去修改，只有一個修改為false Object.preventExtensions("我們的對象");
        let result = Super.apply(obj, value); //調用Super的構造函數
        return typeof result === "object" ? result : obj;; //判斷Super構造器總返回一個Object
    }
}

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

歡迎補充

GPU云服務器云服務器你應該知道你知道數據分析知道你百度一下你就知道了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95673.html

JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
數據結構于算法—線性表詳解

摘要：前言通過前面數據結構與算法前導我么知道了數據結構的一些概念和重要性，那么我們今天總結下線性表相關的內容。基本結構對于線性表，我們只需要一個數組和就能表示基本信息。前言通過前面數據結構與算法前導我么知道了數據結構的一些概念和重要性，那么我們今天總結下線性表相關的內容。當然，我用自己的理解解分享給大家。其實說實話，可能很多人依然分不清線性表，順序表，和鏈表之間的區別和聯系！線性...

Freelander 2019-08-19 10:29 評論0 收藏0
JavaScript類型檢測詳解

摘要：種原始類型對象屬性種原始類型中種原始類型為，，，，發現除外的其他種基本類型均可以用來識別因為會得到，所以直接用來檢測對象的對象包括內置對象，，等和自定義對象。其他檢測方法，都各有缺陷，不能精確。屬性檢測屬性是否在實例對象中應該用。本篇介紹一下如何檢測JavaScript各種類型。 ? 5種原始類型? 對象? Function? Array? 屬性 5種原...

張金寶 2019-08-20 10:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0