詳解JS中的物件字面量
前言
在 ES6 之前，js中的物件字面量(也稱為物件初始化器)是非常基礎的。可以定義兩種型別的屬性：
- 鍵值對{name1: value1}
- 獲取器{ get name(){..} }和 設定器{ set name(val){..}}的計算屬性值
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; // => 15js是一種基於原型的語言，因此一切都是物件。 在物件建立，配置和訪問原型時，必須提供一種易於構造的語言。
定義一個物件並設定它的原型是一個常見的任務。最好的方式是直接在物件字面量使用一條語句來設定原型。
不幸的是，字面量的侷限性不允許用一個簡單的解決方案來實現這一點。必須結合使用object.create()和物件字面量來設定原型。
var myProto =qTMsg {
propertyExists: function(name) {
return name in this;
}
};
var myNumbers = Object.create(myProto);
myNumbers['arrat'] = [1,6,7];
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => falhttp://www.cppcns.com
我認為這種解決方案不夠靈活。JS 是基於原型的，為什麼要用原型建立物件那麼麻煩？
幸運的是，JS 也在慢慢完善。JS 中很多令人沮喪的問題都是逐步解決的。
本文演示了 ES 6 如何解決上述問題，並使用額外的功能改進物件字面量。
- 在物件構造上設定原型
- 方法的宣告
- super 呼叫
- 計算屬性名
1. 在物件構造上設定原型
如你所知，訪問現有物件原型的一種方法是使用 getter 屬性__proto__：
var myObject = {
name: 'Hello World!',};
myObject.__proto__; // => {}
myObject.__proto__.isPrototypeOf(myObject); // => truemyObject.__ proto__返回myObject的原型物件。
請注意，不建議將object.__ proto__用作getter/setter。替代方法應考慮使用Object.getPrototypeOf()和Object.setPrototypeOf()。
ES6允許使用__proto__作為屬性名，並在{__proto__：protoObject}中設定原型。
接著，咱們使用__proto__屬性進行物件初始化，並優化上面的程式碼：
var myProto = {
propertyExists: function(name) {
return name in this;
},};
var myNumbers = {
__proto__: myProto,array: [1,7],};
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => false
myNumbers物件是使用特殊屬性名proto與建立原型myProto，這次咱們使用一條語句就建立，沒有像上面還需要object.create()這樣的附加函式。
如你所看，使用__proto__進行編碼很簡單，我一直喜歡簡單明瞭的解決方案。
說點脫離主題。 我覺得奇怪的是，簡單靈活的解決方案需要大量的工作和設計。如果解決方案很簡單，你可能會認為設計起來很容易。但是反之亦然：
- 要使它簡單明瞭是很複雜的
- 把它變得複雜和難以理解是很容易的
如果某些東西看起來太複雜或難以使用，則可能還需要進一步的完善。
1.1 __proto__用法的特殊情況
即使__proto__看起來很簡單，您也應該注意一些特殊情況。
在物件字面量中只能使用__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__屬性的值。 任何使用原始型別（字串，數字，布林值）或undefined型別都將被忽略，並且不會更改物件的原型。
var objUndefined = {
__proto__: undefined,};
Object.getPrototypeOf(objUndefined); // => {}
var objNumber = {
__proto__: 15,};
Object.getPrototypeOf(objNumber); // => {}
物件字面量使用undefined和 數字15來設定__proto__值。 因為僅允許將物件或null用作原型，所以__proto__值將被忽略，但objUndefined和objNumber仍具有其預設原型：純 JS 物件{},。
當然，嘗試使用基本型別來設定物件的原型也會很奇怪。
當物件字面具有計算結果為'__proto__'的字串時{['__proto__']：protoObj }，也要小心。 以這種方式建立的屬性不會更改物件的原型，而只是使用鍵'__proto__'建立一個擁有的屬性
2.簡寫方法定義
可以使用較短的語法在物件常量中宣告方法，以省略function關鍵字和：冒號的方式。 這被稱為簡寫方法定義。
接著，咱們使用簡寫的方法來定義一些方法：
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
一個很好的好處是，以這種方式宣告的方法被命名為函式，這對於除錯目的很有用。 從上面示例中執行collection.add.name會返回函式名稱“add”。
3. super 的使用
JS 一個有趣的改進是使用super關鍵字作為從原型鏈訪問繼承的屬性的能力。 看下面的例子：
var calc = {
numbers: null,sumElements() {
return this.numbers.reduce(function(a,b) {
return a + b;
});
},};
var numbers = {
__proto__: calc,numbers: [4,sumElements() {
if (this.numbers == null || this.numbers.length === 0) {
return 0;
}
return super.sumElements();
},};
numbers.sumElements(); // => 17
calc是numbers物件的原型。 在numbers的sumElements方法中，可以使用super關鍵字從原型訪問方法：super.sumElements()
最終，super是從物件原型鏈訪問繼承的屬性的快捷方式。
在前面的示例中，可以嘗試直接執行calc.sumElements()來呼叫原型，會報錯。 然而，super.sumElements()可以正確呼叫，因為它訪問物件的原型鏈。並確保原型中的sumElements()方法使用this.numbers正確訪問陣列。
super存在清楚地表明繼承的屬性將被使用。
3.1 super 使用限制
super只能在物件字面量的簡寫方法定義內使用。
如果試圖從普通方法宣告{ name: function(){} }訪問它，JS 將丟擲一個錯誤:
var calc = {
numbers: null,sumElements: function() {
if (this.numbers 程式設計客棧== null || this.numbers.length === 0) {
return 0;
}
return super.sumElements();
},};
// Throws SyntaxError: 'super' keyword unexpected here
numbers.sumElements();
方法sumElements被定義為一個屬性:sumElements: function(){…}。因為super只能在簡寫方法中使用，所以在這種情況下呼叫它會丟擲SyntaxError: 'super' keyword unexpected here。
此限制在很大程度上不影響物件字面量的宣告方式。 由於語法較短，因此通常最好使用簡寫方法定義。
4.計算屬性名
在 ES6 之前，物件初始化使用的是字面量的形式，通常是靜態字串。 要建立具有計算名稱的屬性，就必須使用屬性訪問器。
function prefix(prefStr,name) {
return prefStr + '_' + name;
}
var object = {};
object[prefix('number','pi')] = 3.14;
object[prefix('bool','false')] = false;
object; // => { nuqTMsgmber_pi: 3.14,bool_false: false }
當然，這種定義屬性的方式是令人愉快的。
接著使用簡寫方式來改完上面的例子：
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')表示式（即'number_pi'）來設定屬性名稱。
相應地，[prefix('bool','false')]將第二個屬性名稱設定為'bool_false'。
4.1 symbol 作為屬性名稱
symbol 也可以用作計算的屬性名稱。 只要確保將它們包括在方括號中即可：{[Symbol（'name'）]：'Prop value'}
例如，用特殊屬性Symbol.iterator並迭代物件自身的屬性名稱。 如下示例所示：
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 *() { }定義一個屬性，該屬性用於迭代物件的自有屬性。 展開運算子[... object]使用迭代器並返回自有的屬性的列表
5.剩餘和展開屬性
剩餘屬性允許從物件中收集在分配銷燬後剩下的屬性。
下面的示例在解構物件之後收集剩餘的屬性：
var object = {
propA: 1,propB: 2,propC: 3,};
let { propA,...restObject } = object;
propA; // => 1
restwww.cppcns.comObject; // => { propB: 2,propC: 3 }
展開屬性允許將源物件的自有屬性複製到物件文字面量中。 在此示例中，物件字面量從源物件收集到物件的其他屬性：
var source = {
propB: 2,};
var object = {
propA: 1,...source,};
object; // => { propA: 1,propC: 3 }
6.總結
在 ES6 中，即使是作為物件字面量的相對較小的結構也得到了相當大的改進。
可以使用__proto__屬性名稱直接從初始化器設定物件的原型。 這比使用Object.create()更容易。
請注意，__proto__是 ES6 標準附件B的一部分，不鼓勵使用。 該附件實現對於瀏覽器是必需的，但對於其他環境是可選的。NodeJS 4、5和6支援此功能。
現在方法宣告的形式更短，因此不必輸入function關鍵字。 在簡化方法中，可以使用super關 鍵字，該關鍵字可以輕鬆訪問物件原型鏈中的繼承屬性。
如果屬性名稱是在執行時計算的，那麼現在您可以使用計算的屬性名稱[expression]來初始化物件。
以上就是詳解JS中的物件字面量的詳細內容，更多關於JS物件字面量的資料請關注我們其它相關文章！