JS 箭頭函數

筆記整理自：廖雪峰老師的JS教程

目錄

• 簡介
• 使用格式
• 參數
• 函數體
• 注意點
• 返回對象
• this

簡介

ES6標准新增了一種新的函數：Arrow Function（箭頭函數）。

為什么叫Arrow Function？因為它的定義用的就是一個箭頭：
類似Java8出現的Lamda表達式，復習時注意一並復習Lamda表達式。

x => x * x

上面的箭頭函數相當於：

function (x) {
    return x * x;
}

箭頭函數相當於匿名函數，並且簡化了函數定義。但與匿名函數有所不同，區別在this。

使用格式

參數

• 一個參數
  括號()可以省略。
  如：x => x * x

• 零個參數
  括號()不可以省略。
  如：() => 3.14

• 多個參數
  括號()不可以省略。
  如：(x, y) => x * x + y * y

函數體

• 函數體內只包含一個表達式
  { ... }和return可以省略掉。
  如：(x, y) => x * x + y * y
• 函數體內包含多條表達式
  { ... }和return不可以省略掉。

如：

(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

注意點

返回對象

如果要返回一個對象，就要注意，如果是單表達式，這么寫的話會報錯：

// SyntaxError:
x => { foo: x }

因為和函數體的{ ... }有語法沖突，所以要改為：

// ok:
x => ({ foo: x })

this

箭頭函數看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法作用域，由上下文確定。
回顧前面的例子，由於JavaScript函數對this綁定的錯誤處理，下面的例子無法得到預期結果：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

箭頭函數完全修復了this的指向，this總是指向詞法作用域，也就是外層調用者obj：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象
        return fn();
    }
};
obj.getAge(); // 25

與Java8 Lamda表達式類似，Java中在匿名內部類中調用this，指向匿名內部類對象，而使用Lamda表達式實現則不會出現這個情況，this指向外層類對象。當然使用Lamda的前提是實現的類為接口函數。