JavaScript在ES6(ECMAScript 2015)加入了箭頭函數表示式(arrow function expression)的語法，使函式的語法更為簡潔
範例
// arrow function
(param1, param2, ..., paramN) => { statements; }
// 相當於
function(param1, param2, ..., paramN) {
statements;
}
//範例
(x, y) => { x + y; }
只有一行表示式時，省略大括弧會自動回傳結果。
// arrow function
(param1, param2, ..., paramN) => statements //結尾不用分號
// 相當於
function(param1, param2, ..., paramN) {
return statements;
}
//範例
(x, y) => x === y
只有一個參數時可以省略括弧。
// arrow function
param1 => { statements }
// 相當於
function(param1) {
statements;
}
//範例
x => { x++; }
沒有傳入任何參數則一定要括弧。
// arrow function
() => { statements }
// 相當於
function() {
statements;
}
//範例
() => { console.log('hello world'); }
另外arrow function的this與原本function的this不同。原本的function擁有自己的this物件，其指向呼叫這個function的物件，也就是caller（若function不屬於任何object則指向全域物件）；但arrow function沒有自己的this，arrow function中的this又叫"lexical this"，是指向執行環境(execution context)的this物件，所謂的執行環境是指arrow function定義時的lexical scope。
例如下面範例的callback函式是用原本的function宣告，在一般模式下callback中的this是全域物件（在瀏覽器為window物件，node.js為node.js的global object），在嚴格模式(strict mode)下是undefined
function Person() {
this.age = 10;
console.log('Person', this);
func(
function () { // 這個是callback函式
console.log('callback', this); // this 指向全域物件
}
);
}
function func (callback) {
callback();
}
var p = new Person();
執行結果，callback中的this印出node.js的global object的內容。
Person Person { age: 10 }
callback { console: [Getter],
...
...
...
setInterval: [Function],
setTimeout: { [Function: setTimeout] [Symbol(util.promisify.custom)]: [Function] } }
而下面的程式碼將上面範例中的callback改成arrow function來宣告，則callback中的this則指向Person物件
function Person() {
this.age = 10;
console.log('Person', this);
func( () => { // 改為 arrow function
console.log('callback', this); // this 指向Person物件
});
}
function func (callback) {
callback();
}
var p = new Person();
執行結果
Person Person { age: 10 }
callback Person { age: 10 }
根據以上特性，arrow function多用在匿名函式，而原本funciton關鍵字就用來定義一般的函式或物件的方法。
參考：
沒有留言:
張貼留言