JavaScript ES6 Arrow Functions 箭頭函數

ES6 允許我們用箭頭 => 來更方便簡短的定義一個函數，這種語法稱作 Arrow Functions。

Arrow Functions 由參數列 (...) 接著 => 和函數內容所組成。

語法：

// 如果有多行函數內容，跟一般函數一樣，用大括號 {} 包住
(param1, param2, …, paramN) => { statements }

// 可以用 return 返回值
(param1, param2, …, paramN) => { return expression; }

// 如果只有一行 expression 語句，可以省略大括號 {}
// 同時 expression 的值，會被當作是函數返回值
(param1, param2, …, paramN) => expression

// 如果只有一個參數，可以省略參數小括號 ()
(singleParam) => { statements }
singleParam => { statements }

// 如果沒有參數，必須留著空的小括號 ()，不能省略
() => { statements }
() => expression

例子 1：

// 傳統標準的函數宣告語法
var multiply = function(a, b) {
    return a * b;
};

// 使用 Arrow Functions 的語法
var multiply = (a, b) => a * b;

// 20
multiply(2, 10)

例子 2：

let numbers = [1, 2, 3];

// callback 用 Arrow Functions 的寫法更精簡
let doubles = numbers.map(num => {
    return num * 2;
});

// [2, 4, 6]
console.log(doubles);

Binding of this

Arrow Functions 不僅只是提供一個更簡潔的語法，另外一個重要的特性是 Arrow Functions 會自動綁定 (bind) this 到宣告 Arrow Functions 當時的環境 (context)。

先來看傳統標準的函數宣告：

function Person() {
    this.age = 0;

    setInterval(function growUp() {
        // 這邊的 this 會指向 window，造成程式錯誤
        this.age++;
    }, 1000);
}

var p = new Person();

針對這問題，傳統的解法像是：

function Person() {
    // 先將正確的 this reference 存到一個變數中
    var self = this;
    self.age = 0;

    setInterval(function growUp() {
        // self 變數會正確的指向 Person 物件
        self.age++;
    }, 1000);
}

Arrow Functions 最有用的特性之一，就是會自動綁定 this 到函數定義時的環境：

function Person() {
    this.age = 0;

    // 定義該 Arrow Functions 時的環境，是在 Person 物件中
    setInterval(() => {
        // 所以 this 會正確指向 Person 物件
        this.age++;
    }, 1000);
}

var p = new Person();