成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于創(chuàng)建對象的三種寫法 ---- 字面量,new構(gòu)造器和Object.create()

Jiavan / 1690人閱讀

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

前言

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

1、使用“對象字面量”表示法 
console.time("函數(shù)字面量運行時間");
//嵌套函數(shù)字面量
var Person = {
  name: "one"
};
Person.getName = function () {
  console.log(this.name);
}
//調(diào)用方法
Person.getName(); // one
console.timeEnd("函數(shù)字面量運行時間") // 函數(shù)字面量運行時間: 4.969ms
2、使用new操作符后跟Object構(gòu)造函數(shù)

詳情可參考關(guān)于Javascript中的new運算符,構(gòu)造函數(shù)與原型鏈一些理解

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

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

當(dāng)代碼執(zhí)行時會經(jīng)過幾個步驟：

1,一個繼承自Person.prototype的新對象被創(chuàng)建.
2,創(chuàng)建執(zhí)行的時候，同時上下文(this)會被指定為這個新實例
3,執(zhí)行構(gòu)造函數(shù)中的代碼（設(shè)置新對象的__proto__屬性指向構(gòu)造函數(shù)的prototype對象等）
4,new出來的結(jié)果為步驟1創(chuàng)建的對象
3、使用Object.create(prototype, descriptors)

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

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

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

異常

prototype 參數(shù)不是對象且不為 null;

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

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

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

//構(gòu)造函數(shù)
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

允許修改需要設(shè)置writable屬性

//構(gòu)造函數(shù)
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區(qū)別 
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 {}

區(qū)別
屬性 new構(gòu)造函數(shù) Object.create(構(gòu)造函數(shù)) Object.create(構(gòu)造函數(shù)原型)
實例類型 實例對象 函數(shù) 實例對象
實例name 1 無 無
原型name 2 無 2
小結(jié)
對比 new Object.create
使用目標(biāo) 函數(shù) 函數(shù)和對象
返回實例 實例對象 函數(shù)和實例對象
實例屬性 繼承構(gòu)造函數(shù)屬性 不繼承構(gòu)造函數(shù)屬性
原型鏈指向 構(gòu)造函數(shù)原型 構(gòu)造函數(shù)/對象本身
對象字面量和Object.create區(qū)別 
//構(gòu)造函數(shù)
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 {}

區(qū)別
屬性 對象字面量 Object.create
實例類型 純對象 實例對象
實例name 1 無
原型name 無 2
原型鏈指向 Object Person
小結(jié)
對比 對象字面量 Object.create
使用目標(biāo) 純對象 函數(shù)和對象
返回實例 純對象 函數(shù)和實例對象
實例屬性 非繼承屬性 不繼承構(gòu)造函數(shù)屬性
原型鏈指向 Object 構(gòu)造函數(shù)/對象本身
個人總結(jié):

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106170.html

相關(guān)文章

  • 關(guān)于javascript的原型和原型鏈，看我就夠了（一）

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

    MoAir 評論0 收藏0

  • 關(guān)于原生js的一些研究

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

    wind3110991 評論0 收藏0

  • __proto__和prototype之區(qū)別和聯(lián)系

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

    paulli3 評論0 收藏0

  • javascript對象詳解：__proto__和prototype的區(qū)別和聯(lián)系

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

    chavesgu 評論0 收藏0

  • 關(guān)于javascript的原型和原型鏈，看我就夠了（三）

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

    joyvw 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<