前言

在 ES6 之前，js中的對(duì)象字面量(也稱為對(duì)象初始化器)是非常基礎(chǔ)的。可以定義兩種類型的屬性：

鍵值對(duì){name1: value1} 獲取器{ get name(){..} }和 設(shè)置器{ set name(val){..}}的計(jì)算屬性值

var myObject = { myString: ’value 1’, get myNumber() { return this._myNumber; }, set myNumber(value) { this._myNumber = Number(value); },};myObject.myString; // => ’value 1’myObject.myNumber = ’15’;myObject.myNumber; // => 15

js是一種基于原型的語(yǔ)言，因此一切都是對(duì)象。 在對(duì)象創(chuàng)建，配置和訪問原型時(shí)，必須提供一種易于構(gòu)造的語(yǔ)言。

定義一個(gè)對(duì)象并設(shè)置它的原型是一個(gè)常見的任務(wù)。最好的方式是直接在對(duì)象字面量使用一條語(yǔ)句來(lái)設(shè)置原型。

不幸的是，字面量的局限性不允許用一個(gè)簡(jiǎn)單的解決方案來(lái)實(shí)現(xiàn)這一點(diǎn)。必須結(jié)合使用object.create()和對(duì)象字面量來(lái)設(shè)置原型。

var myProto = { propertyExists: function(name) { return name in this; }};var myNumbers = Object.create(myProto);myNumbers[’arrat’] = [1, 6, 7];myNumbers.propertyExists(’array’); // => truemyNumbers.propertyExists(’collection’); // => false

我認(rèn)為這種解決方案不夠靈活。JS 是基于原型的，為什么要用原型創(chuàng)建對(duì)象那么麻煩？

幸運(yùn)的是，JS 也在慢慢完善。JS 中很多令人沮喪的問題都是逐步解決的。

本文演示了 ES 6 如何解決上述問題，并使用額外的功能改進(jìn)對(duì)象字面量。

在對(duì)象構(gòu)造上設(shè)置原型 方法的聲明 super 調(diào)用 計(jì)算屬性名1. 在對(duì)象構(gòu)造上設(shè)置原型

如你所知，訪問現(xiàn)有對(duì)象原型的一種方法是使用 getter 屬性__proto__：

var myObject = { name: ’Hello World!’,};myObject.__proto__; // => {}myObject.__proto__.isPrototypeOf(myObject); // => true

myObject.__ proto__返回myObject的原型對(duì)象。

請(qǐng)注意，不建議將object.__ proto__用作getter/setter。替代方法應(yīng)考慮使用Object.getPrototypeOf()和Object.setPrototypeOf()。

ES6允許使用__proto__作為屬性名，并在{__proto__：protoObject}中設(shè)置原型。

接著，咱們使用__proto__屬性進(jìn)行對(duì)象初始化，并優(yōu)化上面的代碼：

var myProto = { propertyExists: function(name) { return name in this; },};var myNumbers = { __proto__: myProto, array: [1, 6, 7],};myNumbers.propertyExists(’array’); // => truemyNumbers.propertyExists(’collection’); // => false

myNumbers對(duì)象是使用特殊屬性名proto與創(chuàng)建原型myProto，這次咱們使用一條語(yǔ)句就創(chuàng)建，沒有像上面還需要object.create()這樣的附加函數(shù)。

如你所看，使用__proto__進(jìn)行編碼很簡(jiǎn)單，我一直喜歡簡(jiǎn)單明了的解決方案。

說(shuō)點(diǎn)脫離主題。 我覺得奇怪的是，簡(jiǎn)單靈活的解決方案需要大量的工作和設(shè)計(jì)。如果解決方案很簡(jiǎn)單，你可能會(huì)認(rèn)為設(shè)計(jì)起來(lái)很容易。但是反之亦然：

要使它簡(jiǎn)單明了是很復(fù)雜的 把它變得復(fù)雜和難以理解是很容易的

如果某些東西看起來(lái)太復(fù)雜或難以使用，則可能還需要進(jìn)一步的完善。

1.1 __proto__用法的特殊情況

即使__proto__看起來(lái)很簡(jiǎn)單，您也應(yīng)該注意一些特殊情況。

在對(duì)象字面量中只能使用__proto__一次，否則 JS 會(huì)報(bào)錯(cuò)：

var object = { __proto__: { toString: function() { return ’[object Numbers]’ } }, numbers: [1, 5, 89], __proto__: { toString: function() { return ’[object ArrayOfNumbers]’ } }};

上面示例中的對(duì)象字面量中使用兩次__proto__屬性，這是不允許的。在這種情況下，將在會(huì)拋出錯(cuò)誤：SyntaxError: Duplicate __proto__ fields are not allowed in object literals。

JS 約束只能用一個(gè)對(duì)象或null作為__proto__屬性的值。 任何使用原始類型（字符串，數(shù)字，布爾值）或undefined類型都將被忽略，并且不會(huì)更改對(duì)象的原型。

var objUndefined = { __proto__: undefined,};Object.getPrototypeOf(objUndefined); // => {}var objNumber = { __proto__: 15,};Object.getPrototypeOf(objNumber); // => {}

對(duì)象字面量使用undefined和 數(shù)字15來(lái)設(shè)置__proto__值。 因?yàn)閮H允許將對(duì)象或null用作原型，所以__proto__值將被忽略，但objUndefined和objNumber仍具有其默認(rèn)原型：純 JS 對(duì)象{}, 。

當(dāng)然，嘗試使用基本類型來(lái)設(shè)置對(duì)象的原型也會(huì)很奇怪。

當(dāng)對(duì)象字面具有計(jì)算結(jié)果為’__proto__’的字符串時(shí){[’__proto__’]：protoObj }，也要小心。 以這種方式創(chuàng)建的屬性不會(huì)更改對(duì)象的原型，而只是使用鍵’__proto__’創(chuàng)建一個(gè)擁有的屬性

2.簡(jiǎn)寫方法定義

可以使用較短的語(yǔ)法在對(duì)象常量中聲明方法，以省略function關(guān)鍵字和：冒號(hào)的方式。 這被稱為簡(jiǎn)寫方法定義。

接著，咱們使用簡(jiǎn)寫的方法來(lái)定義一些方法：

var collection = { items: [], add(item) { this.items.push(item); }, get(index) { return this.items[index]; },};collection.add(15);collection.add(3);collection.get(0); // => 15

一個(gè)很好的好處是，以這種方式聲明的方法被命名為函數(shù)，這對(duì)于調(diào)試目的很有用。 從上面示例中執(zhí)行collection.add.name會(huì)返回函數(shù)名稱“add”。

3. super 的使用

JS 一個(gè)有趣的改進(jìn)是使用super關(guān)鍵字作為從原型鏈訪問繼承的屬性的能力。 看下面的例子：

var calc = { numbers: null, sumElements() { return this.numbers.reduce(function(a, b) { return a + b; }); },};var numbers = { __proto__: calc, numbers: [4, 6, 7], sumElements() { if (this.numbers == null || this.numbers.length === 0) { return 0; } return super.sumElements(); },};numbers.sumElements(); // => 17

calc是numbers對(duì)象的原型。 在numbers的sumElements方法中，可以使用super關(guān)鍵字從原型訪問方法：super.sumElements()

最終，super是從對(duì)象原型鏈訪問繼承的屬性的快捷方式。

在前面的示例中，可以嘗試直接執(zhí)行calc.sumElements()來(lái)調(diào)用原型，會(huì)報(bào)錯(cuò)。 然而，super.sumElements()可以正確調(diào)用，因?yàn)樗L問對(duì)象的原型鏈。并確保原型中的sumElements()方法使用this.numbers正確訪問數(shù)組。

super存在清楚地表明繼承的屬性將被使用。

3.1 super 使用限制

super只能在對(duì)象字面量的簡(jiǎn)寫方法定義內(nèi)使用。

如果試圖從普通方法聲明{ name: function(){} }訪問它，JS 將拋出一個(gè)錯(cuò)誤:

var calc = { numbers: null, sumElements() { return this.numbers.reduce(function(a, b) { return a + b; }); },};var numbers = { __proto__: calc, numbers: [4, 6, 7], sumElements: function() { if (this.numbers == null || this.numbers.length === 0) { return 0; } return super.sumElements(); },};// Throws SyntaxError: ’super’ keyword unexpected herenumbers.sumElements();

方法sumElements被定義為一個(gè)屬性:sumElements: function(){…}。因?yàn)閟uper只能在簡(jiǎn)寫方法中使用，所以在這種情況下調(diào)用它會(huì)拋出SyntaxError: ’super’ keyword unexpected here。

此限制在很大程度上不影響對(duì)象字面量的聲明方式。 由于語(yǔ)法較短，因此通常最好使用簡(jiǎn)寫方法定義。

4.計(jì)算屬性名

在 ES6 之前，對(duì)象初始化使用的是字面量的形式，通常是靜態(tài)字符串。 要?jiǎng)?chuàng)建具有計(jì)算名稱的屬性，就必須使用屬性訪問器。

function prefix(prefStr, name) { return prefStr + ’_’ + name;}var object = {};object[prefix(’number’, ’pi’)] = 3.14;object[prefix(’bool’, ’false’)] = false;object; // => { number_pi: 3.14, bool_false: false }

當(dāng)然，這種定義屬性的方式是令人愉快的。

接著使用簡(jiǎn)寫方式來(lái)改完上面的例子：

function prefix(prefStr, name) { return prefStr + ’_’ + name;}var object = { [prefix(’number’, ’pi’)]: 3.14, [prefix(’bool’, ’false’)]: false,};object; // => { number_pi: 3.14, bool_false: false }

[prefix（’number’，’pi’）]通過計(jì)算prefix(’number’, ’pi’)表達(dá)式（即’number_pi’）來(lái)設(shè)置屬性名稱。

相應(yīng)地，[prefix(’bool’, ’false’)]將第二個(gè)屬性名稱設(shè)置為’bool_false’。

4.1 symbol 作為屬性名稱

symbol 也可以用作計(jì)算的屬性名稱。 只要確保將它們包括在方括號(hào)中即可：{[Symbol（’name’）]：’Prop value’}

例如，用特殊屬性Symbol.iterator并迭代對(duì)象自身的屬性名稱。 如下示例所示：

var object = { number1: 14, number2: 15, string1: ’hello’, string2: ’world’, [Symbol.iterator]: function *() { var own = Object.getOwnPropertyNames(this), prop; while(prop = own.pop()) { yield prop; } }}[...object]; // => [’number1’, ’number2’, ’string1’, ’string2’]

[Symbol.iterator]: function *() { }定義一個(gè)屬性，該屬性用于迭代對(duì)象的自有屬性。 展開運(yùn)算符[... object]使用迭代器并返回自有的屬性的列表

5.剩余和展開屬性

剩余屬性允許從對(duì)象中收集在分配銷毀后剩下的屬性。

下面的示例在解構(gòu)對(duì)象之后收集剩余的屬性：

var object = { propA: 1, propB: 2, propC: 3,};let { propA, ...restObject } = object;propA; // => 1restObject; // => { propB: 2, propC: 3 }

展開屬性允許將源對(duì)象的自有屬性復(fù)制到對(duì)象文字面量中。 在此示例中，對(duì)象字面量從源對(duì)象收集到對(duì)象的其他屬性：

var source = { propB: 2, propC: 3,};var object = { propA: 1, ...source,};object; // => { propA: 1, propB: 2, propC: 3 }6.總結(jié)

在 ES6 中，即使是作為對(duì)象字面量的相對(duì)較小的結(jié)構(gòu)也得到了相當(dāng)大的改進(jìn)。

可以使用__proto__屬性名稱直接從初始化器設(shè)置對(duì)象的原型。 這比使用Object.create()更容易。

請(qǐng)注意，__proto__是 ES6 標(biāo)準(zhǔn)附件B的一部分，不鼓勵(lì)使用。 該附件實(shí)現(xiàn)對(duì)于瀏覽器是必需的，但對(duì)于其他環(huán)境是可選的。NodeJS 4、5和6支持此功能。

現(xiàn)在方法聲明的形式更短，因此不必輸入function關(guān)鍵字。 在簡(jiǎn)化方法中，可以使用super關(guān) 鍵字，該關(guān)鍵字可以輕松訪問對(duì)象原型鏈中的繼承屬性。

如果屬性名稱是在運(yùn)行時(shí)計(jì)算的，那么現(xiàn)在您可以使用計(jì)算的屬性名稱[expression]來(lái)初始化對(duì)象。

以上就是詳解JS中的對(duì)象字面量的詳細(xì)內(nèi)容，更多關(guān)于JS對(duì)象字面量的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！