關於創建對象的三種寫法 ---- 字面量,new構造器和Object.create()

原创 Lin_Grady 教程 javascript/jQuery 147阅读 2017-05-09 16:08:25 举报

PS:2018/04/14: 重新梳理一下發現以前說的有問題,順便比較兩兩寫法之間的差異性.

1、使用“對象字面量”表示法

2、使用new操作符後跟Object構造函數

詳情可參考關於Javascript中的new運算符,構造函數與原型鏈一些理解

當代碼執行時會經過幾個步驟:

1,一個繼承自Person.prototype的新對象被創建.
2,創建執行的時候,同時上下文(this)會被指定為這個新實例
3,執行構造函數中的代碼(設置新對象的proto屬性指向構造函數的prototype對象等)
4,new出來的結果為步驟1創建的對象

3、使用Object.create(prototype, descriptors)

這是E5中提出的一種新的對象創建方式,對主流瀏覽器友好,創建一個具有指定原型且可選擇性地包含指定屬性的對象。(詳情可參考Object.create 函數 (JavaScript))
關於new構造器創建對象與字面量創建對象和Object.create()創建對象的區別

  • 參數
    prototype必需。 要用作原型的對象,可以爲 null;
    descriptors可選。 包含一個或多個屬性描述符的 JavaScript 對象;
  • 返回值
    一個具有指定的內部原型且包含指定的屬性(如果有)的新對象;
  • 異常
    prototype 參數不是對象且不爲 null;
    descriptors 參數中的描述符具有 value 或 writable 特性,並具有 get 或 set 特性;
    descriptors 參數中的描述符具有不爲函數的 get 或 set 特性;

需要注意descriptors“數據屬性”是可獲取且可設置值的屬性.數據屬性描述符包含 value 特性,以及 writable、enumerable 和 configurable 特性.如果未指定最後三個特性,則它們默認為 false.只要檢索或設置該值,“訪問器屬性”就會調用用戶提供的函數. 訪問器屬性描述符包含 set 特性和/或 get 特性.即

允許修改需要設置writable屬性

new和Object.create區別

圖片描述
區別

屬性new構造函數Object.create(構造函數)Object.create(構造函數原型)
實例類型實例對象函數實例對象
實例name1
原型name22

小結

對比newObject.create
使用目標函數函數和對象
返回實例實例對象函數和實例對象
實例屬性繼承構造函數屬性不繼承構造函數屬性
原型鏈指向構造函數原型構造函數/對象本身

對象字面量和Object.create區別

圖片描述
區別

屬性new構造函數Object.create
實例類型純對象實例對象
實例name1
原型name2
原型鏈指向ObjectPerson

小結

對比對象字面量Object.create
使用目標純對象函數和對象
返回實例純對象函數和實例對象
實例屬性非繼承屬性不繼承構造函數屬性
原型鏈指向Object構造函數/對象本身

個人總結:

1,對象字面量是最簡潔的寫法;
2,Object.create()可以實現一個繼承目標且可高度配置的對象;
3,Object.create(null)可以得到無繼承的最純淨對象;

(博客運行有問題,直接複制代碼去查看效果吧)
圖片描述

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复