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

Jiavan 發布于2019-08-26 10:26 / 1681人閱讀

摘要：前言重新梳理一下發現以前說的有問題順便比較兩兩寫法之間的差異性使用對象字面量表示法函數字面量運行時間嵌套函數字面量調用方法函數字面量運行時間函數字面量運行時間使用操作符后跟構造函數詳情可參考關于中的運算符構造函數與原型鏈一些理解構造函數原型

前言

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

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

console.time("函數字面量運行時間");
//嵌套函數字面量
var Person = {
  name: "one"
};
Person.getName = function () {
  console.log(this.name);
}
//調用方法
Person.getName(); // one
console.timeEnd("函數字面量運行時間") // 函數字面量運行時間: 4.969ms

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

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

//構造函數
function Person(name) {
  this.name = name
}
//原型添加方法
Person.prototype.getName = function () {
  console.log(this.name);
}

console.time("構造函數運行時間");
//生成實例
var Person = new Person("two");
//調用方法
Person.getName(); // two
console.timeEnd("構造函數運行時間"); // 構造函數運行時間: 5.435ms

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

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

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

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

參數	描述
prototype(必需)	要用作原型的對象,可以為 null
descriptors(可選)	包含一個或多個屬性描述符的 JavaScript 對象

返回值

一個具有指定的內部原型且包含指定的屬性（如果有）的新對象;

異常

prototype 參數不是對象且不為 null;

descriptors 參數中的描述符具有 value 或 writable 特性，并具有 get 或 set 特性;

descriptors 參數中的描述符具有不為函數的 get 或 set 特性;

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

//構造函數
function Person(name) {
  this.name = "name"
}
//原型添加方法
Person.prototype.getName = function () {
  console.log(this.name);
}

console.time("Object.create運行時間")
//生成實例
var Person = Object.create(Person.prototype, {
  name: {
    value: "three"
  }
});
Person.getName(); // three
console.timeEnd("Object.create運行時間") // Object.create運行時間: 3.272ms

允許修改需要設置writable屬性

//構造函數
function Person(name) {
  this.name = "name"
}
//原型添加方法
Person.prototype.getName = function () {
  console.log(this.name);
}

//生成實例
var Person = Object.create(Person.prototype, {
  name: {
    value: "three",
    writable: true,
  }
});
Person.name = "four";
Person.getName(); // four

new和Object.create區別

function Person(name) {
  this.name = 1
}
Person.prototype.name = 2;

//生成實例
var Person_new = new Person();
var Person_create = Object.create(Person);
var Person_create_prototype = Object.create(Person.prototype);

console.log(Person_new, Person_create, Person_create_prototype);
// Person { name: 1 } Function {} Person {}

區別

屬性	new構造函數	Object.create(構造函數)	Object.create(構造函數原型)
實例類型	實例對象	函數	實例對象
實例name	1	無	無
原型name	2	無	2

小結

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

對象字面量和Object.create區別

//構造函數
function Person(name) {
  this.name = 1
}
Person.prototype.name = 2;
//生成實例
var Person1 = {
  name: 1
};
var Person_create_prototype = Object.create(Person.prototype);
console.log(Person1, Person_create_prototype);
// { name: 1 } Person {}

區別

屬性	對象字面量	Object.create
實例類型	純對象	實例對象
實例name	1	無
原型name	無	2
原型鏈指向	Object	Person

小結

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

個人總結:

對象字面量是最簡潔的寫法;

Object.create()可以實現一個繼承目標且可高度配置的對象;

Object.create(null)可以得到無繼承的最純凈對象;

console.log(Object.create(null)) // [Object: null prototype] {}

GPU云服務器云服務器字面量對象對象javascript字面量字面量云計算的三種服務模式

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

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

關于javascript的原型和原型鏈，看我就夠了（一）

摘要：要用作原型的對象。函數對象可以創建普通對象，這個我們上面講過了回顧一下這是一個自定義構造函數普通對象沒法創建函數對象，凡是通過創建的對象都是函數對象，其他都是普通對象通常通過創建，可以通過來判斷。關于js的原型和原型鏈，有人覺得這是很頭疼的一塊知識點，其實不然，它很基礎，不信，往下看要了解原型和原型鏈，我們得先從對象說起創建對象創建對象的三種方式：對象直接量通過對象直接量創建...

MoAir 2019-08-23 12:43 評論0 收藏0
關于原生js的一些研究

摘要：這個屬性本身又是一個類型的對象，原型對象都包含一個指向構造函數的指針，而每一個實例也都包含一個指向原型對象內部的指針。前陣子忙于準備CET-6，沒時間更新文章，之后大概一個月將忙于準備期末考，也應該不會更新了，今天趁周末有時間再更新一篇最近研究的一些東西吧。 callee和caller function inner(){ console.log(arguments.calle...

wind3110991 2019-08-21 10:33 評論0 收藏0
__proto__和prototype之區別和聯系

摘要：當這步完成，這個對象就與構造函數再無聯系，這個時候即使構造函數再加任何成員，都不再影響已經實例化的對象了。此時，對象具有了和屬性，同時具有了構造函數的原型對象的所有成員，當然，此時該原型對象是沒有成員的。學到原型的時候感覺頭都大了/(ㄒoㄒ)/~~ 尤其是prototype和__proto__ 傻傻分不清，通過多番查找資料，根據自己的理解，記錄下最近研究對象的一些心得，做一個記錄與總...

paulli3 2019-08-23 11:55 評論0 收藏0
javascript對象詳解：__proto__和prototype的區別和聯系

摘要：當這步完成，這個對象就與構造函數再無聯系，這個時候即使構造函數再加任何成員，都不再影響已經實例化的對象了。此時，對象具有了和屬性，同時具有了構造函數的原型對象的所有成員，當然，此時該原型對象是沒有成員的。前言本篇文章用來記錄下最近研究對象的一些心得，做一個記錄與總結，以加深自己的印象，同時，希望也能給正在學習中的你一點啟發。本文適合有一定JavaScript基礎的童鞋閱讀。原文戳這...

chavesgu 2019-08-21 11:41 評論0 收藏0
關于javascript的原型和原型鏈，看我就夠了（三）

摘要：對于中的引用類型而言，是保存著它們所有實例方法的真正所在。高級程序設計構造函數陌上寒原型對象有一個屬性，指向該原型對象對應的構造函數為什么有屬性那是因為是的實例。溫故我們先回顧一下前兩天討論的內容創建對象的三種方式通過對象直接量通過new創建對象通過Object.create() js中對象分為兩種函數對象普通對象原型對象prototype 每一個函數對象都...

joyvw 2019-08-23 12:45 評論0 收藏0