在 ECMAScript 2015 之前，JavaScript 里的對(duì)象字面量（也叫對(duì)象初始化器）功能很弱。它只能定義兩種屬性：

普通鍵/值對(duì) { name1: value }Getters { get name(){..} } 以及 setters { set name(val){..} }，用來(lái)設(shè)置和獲取需要計(jì)算的值。

令人心痛地，對(duì)象字面量的所有用法只用一個(gè)簡(jiǎn)單的例子就能囊括：

Try in JS Bin

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

JavaScript 是一個(gè)基于原型的語(yǔ)言，因此一切皆是對(duì)象。當(dāng)涉及到對(duì)象創(chuàng)建、結(jié)構(gòu)和訪問(wèn)原型時(shí)，語(yǔ)言必須提供簡(jiǎn)單的結(jié)構(gòu)。

定義一個(gè)對(duì)象并設(shè)置它的原型是一個(gè)常見(jiàn)的任務(wù)。我總覺(jué)得設(shè)置原型應(yīng)該被對(duì)象字面量直接支持，使用單一的語(yǔ)法。

不幸地是，字面量的局限性使得它沒(méi)有直接的解決方案。你不得不使用 Object.create() 來(lái)結(jié)合對(duì)象字面量和設(shè)置原型：

Try in JS Bin

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

在我看來(lái)，這是一個(gè)不舒服的解決方案。JavaScript 是基于原型的，為什么從原型創(chuàng)建一個(gè)對(duì)象那么麻煩？

幸運(yùn)地是，JavaScript 在改變。比較令人沮喪的許多問(wèn)題在 JavaScript 中正在被一步一步地解決。

這篇文章解釋 ES2015 是如何解決上面所說(shuō)的問(wèn)題以及改進(jìn)對(duì)象字面量以獲得額外的好處：

在對(duì)象構(gòu)造的過(guò)程中設(shè)置原型速記方法定義調(diào)用父類(lèi)方法計(jì)算屬性名稱(chēng)

同時(shí)，讓我們展望未來(lái)，了解最新的提案(stage 2)：對(duì)象的 rest 屬性和屬性展開(kāi)操作符。

1. 在對(duì)象構(gòu)造時(shí)設(shè)置原型

如你已經(jīng)知道得，其中一個(gè)訪問(wèn)一個(gè)已存在對(duì)象的原型的方法是使用 getter 屬性 __proto__：

Try in JS Bin

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

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

好消息是 ES2015 允許使用 字面量 __proto__ 作為屬性名來(lái)設(shè)置對(duì)象字面量的原型 { __proto__: protoObject }。

讓我們用 __proto__ 重寫(xiě)一下上面那個(gè)例子，讓它看起來(lái)好一點(diǎn)：

Try in JS Bin

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

myNumbers 對(duì)象使用原型 myProto 創(chuàng)建，這可以通過(guò)特殊屬性 __proto__ 實(shí)現(xiàn)。

這個(gè)對(duì)象通過(guò)簡(jiǎn)單的語(yǔ)句創(chuàng)建，而不需要額外的函數(shù)例如 Object.create()。

如你所見(jiàn)，使用 __proto__ 是簡(jiǎn)單的。我偏愛(ài)簡(jiǎn)單直接的解決方案。

有點(diǎn)說(shuō)跑題了，回到主題來(lái)。我認(rèn)為獲得簡(jiǎn)單和可靠的解決方案需要通過(guò)大量的設(shè)計(jì)和實(shí)踐。如果一個(gè)解決方案是簡(jiǎn)單的，你可能認(rèn)為它同樣也很容易被設(shè)計(jì)出來(lái)，然而事實(shí)并不是這樣：

讓它變得簡(jiǎn)單明了的過(guò)程是復(fù)雜的讓它變得復(fù)雜和難以理解卻很容易

如果某個(gè)東西看起來(lái)太復(fù)雜或者用起來(lái)不舒服，很可能它的設(shè)計(jì)者考慮不周。

元芳，你怎么看？（歡迎在文章底部發(fā)表評(píng)論參與討論）

2.1 使用 __proto__ 的特例

盡管 __proto__ 看似簡(jiǎn)單，卻有一些特殊的場(chǎng)景你需要格外注意。

在對(duì)象字面量中 __proto__ 只允許使用一次。多次使用的話 JavaScript 會(huì)拋出異常：

Try in JS Bin

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

上面例子中的對(duì)象字面量使用了 __proto__ 屬性?xún)纱危@是不允許的。這種情況下，會(huì)拋出一個(gè)錯(cuò)誤 SyntaxError: Duplicate __proto__ fields are not allowed in object literals。

JavaScript 限制了只允許使用 object 或者 null 作為 __proto__ 屬性的值。使用其它原生類(lèi)型（如字符串、數(shù)值、布爾類(lèi)型）或者 undefined 會(huì)被忽略，并不能改變對(duì)象的原型。

看一個(gè)例子：

Try in JS Bin

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

上面的例子里，對(duì)象字面量使用 undefined 和數(shù)值 15 來(lái)設(shè)置 __proto__ 值。因?yàn)橹挥袑?duì)象或者 null 才允許被使用，objUndefined 和 objNumber 仍然是它們默認(rèn)的原型：簡(jiǎn)單 JavaScript 對(duì)象 {}。__proto__ 的賦值被忽略了。

當(dāng)然，嘗試使用原生類(lèi)型來(lái)設(shè)置對(duì)象的原型，這本身是很奇怪的。所以在這里做限制是符合預(yù)期的。

2. 速記方法定義

現(xiàn)在對(duì)象字面量中可以使用一個(gè)更短的語(yǔ)法來(lái)聲明方法，省略 function 關(guān)鍵字和冒號(hào)。這被叫做速記方法定義（shorthand method definition）。

讓我們用新的方式來(lái)定義一些方法：

Try in JS Bin

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

add() 和 get() 是 collection 中使用快捷的方式定義的方法。

一個(gè)很好的地方是這樣聲明的方法是具名的，這對(duì)于調(diào)試有幫助。執(zhí)行 collection.add.name 將返回函數(shù)名稱(chēng) ’add’。

3. 調(diào)用父類(lèi)方法

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

Try in JS Bin

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

calc 是 numbers 對(duì)象的屬性。在 numbers 的方法 sumElements 里面，要調(diào)用原型 calc上的方法，可以使用 super 關(guān)鍵字： super.sumArray()。

所以 super 是從原型鏈訪問(wèn)被繼承的屬性的一個(gè)快捷的方法。

在上一個(gè)例子里，我們也可以直接調(diào)用 cale.sumArray()，不過(guò) super 是一個(gè)更好的選擇因?yàn)樗L問(wèn)對(duì)象的原型鏈。它的存在清晰地暗示了繼承的屬性將被使用。

3.1 使用 super 的限制

在對(duì)象字面量中， super 只能用在速記方法定義中。

如果在普通的方法聲明 { name: function() {} } 中使用它，JavaScript 會(huì)拋異常：

Try in JS Bin

var calc = { sumArray (items) { return items.reduce(function(a, b) { return a + b; }); }}; var numbers = { __proto__: calc, numbers: [4, 6, 7], sumElements: function() { return super.sumArray(this.numbers); }}; // Throws SyntaxError: ’super’ keyword unexpected here numbers.sumElements();

上面的代碼里，方法 sumElements 被定義為：sumElements:function(){...}。由于 super要求在速記方法中使用，在其中調(diào)用 super 將拋出異常：SyntaxError: ’super’ keyword unexpected here。

這個(gè)限制不會(huì)對(duì)對(duì)象字面量聲明有多少影響，因?yàn)榇蟛糠智闆r下我們沒(méi)有理由不用速記方法定義，畢竟它語(yǔ)法更簡(jiǎn)單。

4. 計(jì)算屬性名稱(chēng)

在 ES2015 之前，對(duì)象初始化器的屬性名稱(chēng)是字面量，大多數(shù)情況下是靜態(tài)字符串。要?jiǎng)?chuàng)建一個(gè)動(dòng)態(tài)計(jì)算的屬性名，你不得不使用屬性訪問(wèn)器：

Try in JS Bin

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)然，這種定義屬性的方法差強(qiáng)人意。

計(jì)算屬性名稱(chēng)能更優(yōu)雅地解決這個(gè)問(wèn)題。

當(dāng)我們從表達(dá)式計(jì)算屬性名稱(chēng)，將代碼放在方括號(hào)之間 {[expression]: value}。這個(gè)表達(dá)式計(jì)算結(jié)果將成為屬性名。

我真的很喜歡這個(gè)語(yǔ)法：短而簡(jiǎn)單。

讓我們改進(jìn)上面的代碼：

Try in JS Bin

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’)] 通過(guò)計(jì)算 prefix(’number’, ’pi’) 表達(dá)式來(lái)設(shè)置屬性名稱(chēng), 得到的結(jié)果是 ’number_pi’。

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

4.1 Symbol 作為屬性名

Symbols 也可以被用來(lái)計(jì)算屬性名稱(chēng)，只需要將它包含在方括號(hào)中：{ [Symbol(’name’)]: ’Prop value’ }。

例如，使用特殊屬性 Symbol.iterator 來(lái)迭代遍歷一個(gè)對(duì)象的自有屬性名，代碼如下：

Try in JS Bin

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è)屬性來(lái)用于迭代遍歷對(duì)象自有屬性。展開(kāi)操作符 [...object] 使用迭代器并返回自有屬性列表。

5. 展望未來(lái)：rest 和屬性展開(kāi)

對(duì)象字面量的 Rest 和屬性展開(kāi) 是新的標(biāo)準(zhǔn)草案中的一個(gè)提案（stage 2），意味著這一特性是新版本 JavaScript 的規(guī)范的候選。

數(shù)組的 展開(kāi)和 rest 操作符 已經(jīng)被實(shí)現(xiàn)了。

Rest 屬性 允許我們從解構(gòu)賦值左側(cè)使用對(duì)象來(lái)收集屬性，看下面的例子：

Try in JS Bin

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

屬性展開(kāi) 允許將源對(duì)象的自有屬性拷進(jìn)對(duì)象字面量?jī)?nèi)部。在上面的例子中，對(duì)象字面量從 souce對(duì)象中收集額外的屬性。

Try in JS Bin

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

JavaScript 在快速進(jìn)步。

即使是相對(duì)小的結(jié)構(gòu)比如對(duì)象字面量在 ES2015 中都有相當(dāng)大的改進(jìn)，更別說(shuō)還有一大堆新特性在草案中。

你可以從初始化器中使用 __proto__ 屬性直接設(shè)置對(duì)象的原型，這比使用 Object.create() 要更方便。

方法聲明可以寫(xiě)成更簡(jiǎn)短的形式，這樣你就不用寫(xiě) function 關(guān)鍵字了。然后在速記方法中可以使用 super 關(guān)鍵字，它能提供方便的對(duì)被繼承原型鏈上屬性的訪問(wèn)。

如果一個(gè)屬性名在運(yùn)行時(shí)計(jì)算，現(xiàn)在你可以使用計(jì)算屬性名稱(chēng) [表達(dá)式] 來(lái)初始化對(duì)象。

的確，對(duì)象字面量現(xiàn)在很酷！

你覺(jué)得呢？歡迎在下方發(fā)表評(píng)論參與討論。

來(lái)自：http://www.zcfy.cc/article/why-object-literals-in-javascript-are-cool-948.html