JavaScript ES6(ECMAScript 2015)使用object initializer notation建立物件時,定義方法時可簡寫如下。
新的語法省略了function
關鍵字。
var user = {
sayHi () {
console.log('Hi');
}
}
下面是使用function
的語法。
var user = {
sayHi: function () {
console.log('Hi');
}
}
而新舊語法中的this
皆是指向呼叫函式的物件。
下面範例以object initializer notation的方式建立user
物件時,使用三種方式來定義方法。
- 第一種(
sayHi_1()
)為原本使用function
定義的方式; - 第二種(
sayHi_2()
)為ES6省略function
的簡寫方式; - 第三種(
sayHi_3()
)為ES6的arrow function。
在呼叫方法時,第一及第二種方式中的this
指向呼叫函式的物件,也就是user
;而第三種用arrow function定義的方法中this
為空物件,因為arrow function並沒有自己的this
。
var user = {
name: 'matt',
sayHi_1: function() {
console.log(`Hi, I'm ${this.name}`); // ${this.name} 為ES6的template string語法
},
sayHi_2 () {
console.log(`Hi, I'm ${this.name}`);
},
sayHi_3: () => {
console.log(`Hi, I'm ${this.name}`);
},
}
user.sayHi_1(); // => Hi, I'm matt
user.sayHi_2(); // => Hi, I'm matt
user.sayHi_3(); // => Hi, I'm undefined
上面的範例使用了JavaScript ES6的template string語法。
參考:
沒有留言:
張貼留言