JavaScript-函數（六）箭頭函數

原文出處 ：https://www.liaoxuefeng.com/

箭頭函數

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

為什麼叫Arrow Function？因為它的定義用的就是一個箭頭：

上面的箭頭函數相當于：

function (x) {
    return x * x;
}
           

在繼續學習箭頭函數之前，請測試你的浏覽器是否支援ES6的Arrow Function：

'use strict';
      

var fn = x => x * x;

console.log('你的浏覽器支援ES6的Arrow Function!');      

你的浏覽器支援ES6的Arrow Function!

箭頭函數相當于匿名函數，并且簡化了函數定義。箭頭函數有兩種格式，一種像上面的，隻包含一個表達式，連

{ ... }

和

return

都省略掉了。還有一種可以包含多條語句，這時候就不能省略

{ ... }

和

return

：

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}
           

如果參數不是一個，就需要用括号

()

括起來：

// 兩個參數:
(x, y) => x * x + y * y

// 無參數:
() => 3.14

// 可變參數:
(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
           

如果使用箭頭函數，以前的那種hack寫法：

var that = this;
           

就不再需要了。

由于

this

在箭頭函數中已經按照詞法作用域綁定了，是以，用

call()

或者

apply()

調用箭頭函數時，無法對

this

進行綁定，即傳入的第一個參數被忽略：

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25
           

練習

請使用箭頭函數簡化排序時傳入的函數：

'use strict'
var arr = [10, 20, 1, 2];
      

arr.sort((x, y) => {

    if(x < y)

       return -1;

    else if(x > y)

       return 1;

    else 

       return 0;

});

console.log(arr); // [1, 2, 10, 20]

1,2,10,20