JavaScript ES6的箭頭函式(arrow function)

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關鍵字就用來定義一般的函式或物件的方法。

參考：

• MDN - Arrow functions
• 從ES6開始的JavaScript學習生活 - 箭頭函式