.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號： N161117701
出刊日期： 2016/11/2
本文延續《ECMAScript 2015 - 1》、《ECMAScript 2015 - 2》一文的內容，介紹ECMAScript 2015版本中針對的Object Literal Notation提供的物件新語法，以及初始化屬性的Property Initializer語法，利用這些語法可以讓程式變得更為簡潔。
加強版的Object Literal Notation語法
JavaScript提供Object Literal Notation語法來定義物件，在ECMAScript 2015中，宣告屬性的語法，可以變得更簡潔，參考以下範例程式碼，o物件的屬性來自於empName、age與dept三個變數：
let empName = "Mary",
age = 42,
dept = {};
let o = { empName, age, dept };
console.log( o.empName ); //Mary
console.log( o.age ); // 42
console.log( o.dept ); // {}
Property Initializer
有時我們常常會利用函式回傳一個使用Object Literal Notation語法定義的物件，參考以下範例程式碼，使用EMMAScript 5語法，createEmployee函式回傳一個物件，此物件的id與name屬性的值，分別來自於createEmployee函式的id、name參數值：
function createEmployee( id, name ) {
return {
id : id,
name : name
};
}
let emp1 = createEmployee( 1, "mary" );
console.log( emp1.id ); // 1
console.log( emp1.name ); // mary
我們可以使用ECMAScript 2015新增Property Initializer語法，讓物件的屬性初始化動作更為簡單，若屬性的名稱與參數名稱相同，可以簡寫如下，這個範例將會得到和上述範例相同的執行結果：
function createEmployee( id, name ) {
return {
id,
name
};
}
let emp1 = createEmployee( 1, "mary" );
console.log( emp1.id ); //1
console.log( emp1.name ); //mary
禁止屬性名稱重複定義
在ECMAScript 5若屬性名稱重複定義，則執行時後面蓋前面，例如以下範例程式碼，name重複定義了，因此範例執行的結果將印出「Candy」字串，後面蓋前面：
let employee = {
id: 1,
name: "mary",
name: "Candy"
}
console.log( employee.name ); //candy
但若在ECMAScript 5的嚴格模式（strict mode）中，若屬性名稱重複定義，則執行時會出現錯誤，參考以下範例程式碼：
"use strict"
let employee = {
id: 1,
name: "mary",
name: "Candy"
}
console.log( employee.name ); // Multiple definitions of a property not allowed in strict mode
這段程式碼在IE11中執行時，會得到以下的錯誤訊息：
SCRIPT1046: Multiple definitions of a property not allowed in strict mode
而在ECMAScript 2015中不管是否是使用嚴格模式（strict mode），都不會發生錯誤，而後面的程式碼會蓋掉前面的程式碼，以下範例程式碼執行的結果將印出「Candy」字串：
"use strict"
let employee = {
id: 1,
name: "mary",
name: "Candy"
}
console.log( employee.name ); // candy
使用變數設定屬性名稱
在ECMAScript 2015屬性的名稱可以來自於變數，在宣告屬性時，使用中括號 [ ] 括起來，表示屬性的名稱來自於一個變數或計算過的值，存取使用變數設定的屬性值，也是一樣使用中括號 [ ] 將變數名稱括起來，參考以下範例程式碼：
var x = "empName";
let employee = {
id: 1,
[x]: "mary",
getInfo() {
return this.id + " , " + employee[x];
}
}
for (var i in employee) {
console.log( i ); // id empName getInfo
}
console.log( employee.getInfo() ); // 1 , mary
在Object Literal Notation定義函式
在ECMAScript 5若使用Object Literal Notation定義函式（function），通常搭配匿名函式（anonymous method），參考以下範例程式碼，為employee物件定義一個getInfo() 函式，回傳employee相關的id與name屬性值：
let employee = {
id: 1,
name: "mary",
getInfo: function () {
return this.id + " , " + this.name;
}
}
console.log( employee.getInfo() ); // 1 , mary
ECMAScript 2015將語法改的更為精簡，可以省略前述範例中的「:」符號與「function」關鍵字，直接使用函式名稱，後接小括號 ( ) 指定引數，再後接大括號 { } 加入函式的程式碼，參考以下範例程式碼：
let employee = {
id: 1,
name: "mary",
getInfo () {
return this.id + " , " + this.name;
}
}
console.log( employee.getInfo() ); // 1 , mary
console.log( employee.getInfo.name ); // getInfo
我們可以使用name屬性來取得函式的名稱為「getInfo」。
若Object Literal Notation物件中的函式需要傳遞引數，只要在小括號中指定引數名稱，以逗號做區隔即可，參考以下範例程式碼：
let employee = {
id: 1,
name: "mary",
getInfo() {
return this.id + " , " + this.name;
},
printInfo( timestamp ) {
console.log(
this.id + " , " +
this.name + "," +
timestamp
);
}
}
console.log( employee.getInfo() ); // 1 , mary
console.log( employee.getInfo.name ); // getInfo
employee.printInfo( new Date() ); // 1 , mary,Thu Sep 01 2016 16:23:32 GMT+0800 (Taipei Standard Time)
使用變數設定函式名稱
和屬性一樣，我們也可以用變數來定義函式的名稱，參考以下範例程式碼，使用x變數的內容當做函式名稱，在物件定義函式時，使用 [ ] 號將變數x括起來：
var x = "empName";
let employee = {
id: 1,
[ x ]() { return "Mary" ; },
getInfo() {
return this.id + " , " + employee[ x ]();
}
}
console.log( employee.getInfo() ); // 1 , Mary
console.log( employee[x]() ); // Mary
函式名稱也可以來自於一個運算的結果，參考以下範例程式碼，函式的名稱是「x+y」運算式計算出的結果「empName」：
let x = "emp";
let y = "Name";
let employee = {
id : 1,
[ x + y ]() { return "Mary"; },
getInfo() {
return this.id + " , " + employee[ x + y ]();
}
}
console.log( employee.getInfo() ); // 1 , Mary
console.log( employee[x + y]() ); // Mary
訂閱