為什么 JS 中的對象字面量很酷
在 ES6 之前，JS 中的對象字面量(也稱為對象初始化器)是非常基礎(chǔ)的。可以定義兩種類型的屬性：
- 鍵值對 {name1: value1}
- 獲取器 { get name(){..} } 和 設(shè)置器 { set name(val){..}} 的計算屬性值
JS 是一種基于原型的語言，因此一切都是對象。在對象創(chuàng)建，配置和訪問原型時，必須提供一種易于構(gòu)造的語言。
定義一個對象并設(shè)置它的原型是一個常見的任務(wù)。最好的方式是直接在對象字面量使用一條語句來設(shè)置原型。
不幸的是，字面量的局限性不允許用一個簡單的解決方案來實現(xiàn)這一點。必須結(jié)合使用object.create() 和對象字面量來設(shè)置原型。
我認(rèn)為這種解決方案不夠靈活。JS 是基于原型的，為什么要用原型創(chuàng)建對象那么麻煩?
幸運的是，JS 也在慢慢完善。JS 中很多令人沮喪的問題都是逐步解決的。
本文演示了 ES 6 如何解決上述問題，并使用額外的功能改進(jìn)對象字面量。
- 在對象構(gòu)造上設(shè)置原型
- 方法的聲明
- super 調(diào)用
- 計算屬性名
1. 在對象構(gòu)造上設(shè)置原型
如你所知，訪問現(xiàn)有對象原型的一種方法是使用 getter 屬性 __proto__：
- var myObject = {
- name: 'Hello World!',
- };
- myObject.__proto__; // => {}
- myObject.__proto__.isPrototypeOf(myObject); // => true
myObject.__ proto__ 返回 myObject 的原型對象。
請注意，不建議將 object.__ proto__ 用作 getter/setter。替代方法應(yīng)考慮使用Object.getPrototypeOf() 和 Object.setPrototypeOf()。
ES6允許使用__proto__作為屬性名，并在 {__proto__：protoObject}中設(shè)置原型。
接著，咱們使用 __proto__ 屬性進(jìn)行對象初始化，并優(yōu)化上面的代碼：
- 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 對象是使用特殊屬性名 proto 與創(chuàng)建原型 myProto，這次咱們使用一條語句就創(chuàng)建，沒有像上面還需要 object.create() 這樣的附加函數(shù)。
如你所看，使用 __proto__ 進(jìn)行編碼很簡單，我一直喜歡簡單明了的解決方案。
說點脫離主題。我覺得奇怪的是，簡單靈活的解決方案需要大量的工作和設(shè)計。如果解決方案很簡單，你可能會認(rèn)為設(shè)計起來很容易。但是反之亦然：
- 要使它簡單明了是很復(fù)雜的
- 把它變得復(fù)雜和難以理解是很容易的
如果某些東西看起來太復(fù)雜或難以使用，則可能還需要進(jìn)一步的完善。
你對簡單性有何看法?(請在下面隨意寫評論)
2. proto 用法的特殊情況
即使__proto__看起來很簡單，您也應(yīng)該注意一些特殊情況。
在對象字面量中只能使用__proto__一次，否則 JS 會報錯：
- var object = {
- __proto__: {
- toString: function() {
- return '[object Numbers]'
- }
- },
- numbers: [1, 5, 89],
- __proto__: {
- toString: function() {
- return '[object ArrayOfNumbers]'
- }
- }
- };
上面示例中的對象字面量中使用兩次__proto__屬性，這是不允許的。在這種情況下，將在會拋出錯誤：SyntaxError: Duplicate __proto__ fields are not allowed in object literals 。
JS 約束只能用一個對象或 null 作為 __proto__ 屬性的值。任何使用原始類型(字符串，數(shù)字，布爾值)或 undefined 類型都將被忽略，并且不會更改對象的原型。
- var objUndefined = {
- __proto__: undefined,
- };
- Object.getPrototypeOf(objUndefined); // => {}
- var objNumber = {
- __proto__: 15,
- };
- Object.getPrototypeOf(objNumber); // => {}
對象字面量使用 undefined 和 數(shù)字 15 來設(shè)置 __proto__ 值。因為僅允許將對象或 null 用作原型，所以__proto__值將被忽略，但 objUndefined 和objNumber 仍具有其默認(rèn)原型：純 JS 對象 {}, 。
當(dāng)然，嘗試使用基本類型來設(shè)置對象的原型也會很奇怪。
當(dāng)對象字面具有計算結(jié)果為'proto'的字符串時 {['__proto__']：protoObj }，也要小心。以這種方式創(chuàng)建的屬性不會更改對象的原型，而只是使用鍵 '__proto__' 創(chuàng)建一個擁有的屬性
3. 簡寫方法定義
可以使用較短的語法在對象常量中聲明方法，以省略 function 關(guān)鍵字和 ： 冒號的方式。這被稱為簡寫方法定義。
接著，咱們使用簡寫的方法來定義一些方法：
- 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
一個很好的好處是，以這種方式聲明的方法被命名為函數(shù)，這對于調(diào)試目的很有用。從上面示例中執(zhí)行 collection.add.name 會返回函數(shù)名稱 “add”。
(1) super 的使用
JS 一個有趣的改進(jìn)是使用 super 關(guān)鍵字作為從原型鏈訪問繼承的屬性的能力。看下面的例子：
calc 是 numbers 對象的原型。在 numbers 的 sumElements方法中，可以使用super關(guān)鍵字從原型訪問方法：super.sumElements()
最終，super 是從對象原型鏈訪問繼承的屬性的快捷方式。
在前面的示例中，可以嘗試直接執(zhí)行 calc.sumElements() 來調(diào)用原型，會報錯。然而，super.sumElements() 可以正確調(diào)用，因為它訪問對象的原型鏈。并確保原型中的sumElements() 方法使用 this.numbers 正確訪問數(shù)組。
super 存在清楚地表明繼承的屬性將被使用。
(2) super 使用限制
super 只能在對象字面量的簡寫方法定義內(nèi)使用。
如果試圖從普通方法聲明{ name: function(){} } 訪問它，JS 將拋出一個錯誤:
方法 sumElements 被定義為一個屬性: sumElements: function(){…}。因為super 只能在簡寫方法中使用，所以在這種情況下調(diào)用它會拋出 SyntaxError: 'super' keyword unexpected here。
此限制在很大程度上不影響對象字面量的聲明方式。由于語法較短，因此通常最好使用簡寫方法定義。
4. 計算屬性名
在 ES6 之前，對象初始化使用的是字面量的形式，通常是靜態(tài)字符串。要創(chuàng)建具有計算名稱的屬性，就必須使用屬性訪問器。
- 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)然，這種定義屬性的方式是令人愉快的。
接著使用簡寫方式來改完上面的例子：
- 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')]通過計算 prefix('number', 'pi') 表達(dá)式(即'number_pi')來設(shè)置屬性名稱。
相應(yīng)地，[prefix('bool', 'false')] 將第二個屬性名稱設(shè)置為'bool_false'。
(1) symbol 作為屬性名稱
symbol 也可以用作計算的屬性名稱。只要確保將它們包括在方括號中即可：{[Symbol('name')]：'Prop value'}
例如，用特殊屬性 Symbol.iterator 并迭代對象自身的屬性名稱。如下示例所示：
[Symbol.iterator]: function *() { } 定義一個屬性，該屬性用于迭代對象的自有屬性。展開運算符 [... object] 使用迭代器并返回自有的屬性的列表。
剩余和展開屬性
剩余屬性允許從對象中收集在分配銷毀后剩下的屬性。
下面的示例在解構(gòu)對象之后收集剩余的屬性：
- var object = {
- propA: 1,
- propB: 2,
- propC: 3,
- };
- let { propA, ...restObject } = object;
- propA; // => 1
- restObject; // => { propB: 2, propC: 3 }
展開屬性允許將源對象的自有屬性復(fù)制到對象文字面量中。在此示例中，對象字面量從源對象收集到對象的其他屬性：
- var source = {
- propB: 2,
- propC: 3,
- };
- var object = {
- propA: 1,
- ...source,
- };
- object; // => { propA: 1, propB: 2, propC: 3 }
6. 總結(jié)
在 ES6 中，即使是作為對象字面量的相對較小的結(jié)構(gòu)也得到了相當(dāng)大的改進(jìn)。
可以使用__proto__ 屬性名稱直接從初始化器設(shè)置對象的原型。這比使用Object.create() 更容易。
請注意，__proto__ 是 ES6 標(biāo)準(zhǔn)附件B的一部分，不鼓勵使用。該附件實現(xiàn)對于瀏覽器是必需的，但對于其他環(huán)境是可選的。NodeJS 4、5和6支持此功能。
現(xiàn)在方法聲明的形式更短，因此不必輸入 function 關(guān)鍵字。在簡化方法中，可以使用super關(guān) 鍵字，該關(guān)鍵字可以輕松訪問對象原型鏈中的繼承屬性。
如果屬性名稱是在運行時計算的，那么現(xiàn)在您可以使用計算的屬性名稱[expression]來初始化對象。
