.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