簡述ES5之object.create()和new() 的區別都做了哪些事

mmy123456 發布于2019-08-23 11:42 / 1613人閱讀

摘要：注意該參數對象不能是，另外只有該對象中自身擁有的可枚舉的屬性才有效，也就是說該對象的原型鏈上屬性是無效的。并且使用進行強轉作用環境。從而實現了實例的創建。

先說一下object.create()

es5中新增的object操作方法object.create() 接受兩個參數:
Object.create(obj,propertiesObject);

obj : 一個對象，是新創建的對象的原型。即:創建一個空對象，空對象的原型是參數obj.

propertiesObject：可選。該參數對象是一組屬性與值，該對象的屬性名稱將是新創建的對象的屬性名稱，值是屬性描述符（這些屬性描述符的結構與Object.defineProperties()的第二個參數一樣）。注意：該參數對象不能是undefined，另外只有該對象中自身擁有的可枚舉的屬性才有效，也就是說該對象的原型鏈上屬性是無效的。即:
propertiesObject = {
like:{ value:"fish", // 初始化賦值
writable:true, // 是否是可改寫的
configurable:true, // 是否能夠刪除，是否能夠被修改
enumerable:true //是否可以用for in 進行枚舉 } ..... }

    var o = Object.create(null);
    console.log(o); // {}
    o.name = "jian";
    var o2 = Object.create(o);
    console.log(o2); // {}
    console.log(o2.name); // "jian", 
    
    沒有找到o2的name屬性==> {}   但是在原型鏈上面可以訪問到 name屬性
    所以object.create()創建一個空對象 然后空對象的原型是參數obj

再來說說new() :

創建空對象；

設置新對象的constructor屬性為構造函數的名稱，設置新對象的__proto__屬性指向構造函數的prototype對象；

使用新對象調用函數，函數中的this被指向新實例對象：

　　ClassA.call(obj);　　//{}.構造函數();

將初始化完畢的新對象地址，保存到等號左邊的變量中

一個包含兩個方法的例子

    
    var test1 = {x:1};
    
    var test2 = new Object(test1);
    
    var test3 = Object.create(test1);
    console.log(test3);//{} 
    //test3等價于test5
    var test4 = function(){
    　　
    }
    test4.prototype = test1;
    var test5 = new test4();
    console.log(test5);
    console.log(test5.__proto__ === test3.__proto__);//true
    console.log(test2);//{x:1}

看完上面的例子應該可以區分兩個方法的區別了

總結

使用Object.create()是將對象繼承到__proto__屬性上

var o1 = new Object();
o1.[[Prototype]] = Base.prototype;
Base.call(o1);
new做法是新建一個對象，并且讓對象的__proto__指向了Base.prototype對象。并且使用call 進行強轉作用環境。從而實現了實例的創建。

GPU云服務器云服務器 es5和js什么區別簡述域名和IP的關系 webrtc一般都做哪些改動簡述申請云服務器的方法和步驟

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

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

如何繼承Date對象？由一道題徹底弄懂JS繼承。

摘要：前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。倘若用的是中文搜索。所以最終的實例對象仍然能進行正常的原型鏈回溯，回溯到原本的所有原型方法這樣通過一個巧妙的欺騙技巧，就實現了完美的繼承。前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。 20180201更新：修改用詞描述，如組合寄生式改成寄生組合式，修改多處筆誤（感謝@Yao Ding的...

sunnyxd 2019-08-22 13:50 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

Kerr1Gan 2019-08-26 12:20 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

lushan 2019-08-02 11:34 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

joyvw 2019-08-30 15:54 評論0 收藏0
JavaScript 原型系統的變遷，以及 ES6 class

摘要：一般我們對這種構造函數命名都會采用，并把它稱呼為類，這不僅是為了跟的理念保持一致，也是因為的內建類也是這種命名。由生成的對象，其是。這是標準的規定。本文的主題是原型系統的變遷，所以并沒有涉及和對原型鏈的影響。概述 JavaScript 的原型系統是最初就有的語言設計。但隨著 ES 標準的進化和新特性的添加。它也一直在不停進化。這篇文章的目的就是梳理一下早期到 ES5 和現在 ES6，...

chuyao 2019-08-22 11:59 評論0 收藏0