1. 程式人生 > >JavaScript 箭頭函式

JavaScript 箭頭函式

x => x * x ;

相當於:

function (x) { return x * x; }

那麼:

var fn = x => x * x ;

相當於:

var fn = function(x){ return x*x; }

箭頭函式相當於匿名函式(有區別),並且簡化了函式定義。

箭頭函式有兩種格式:

一種像上面的,只包含一個表示式,連{ ... }和return都省略掉了。

還有一種可以包含多條語句,這時候就不能省略{ ... }和 return 。

=> 前面是匿名函式的 引數

=> 後面是匿名函式的函式體

箭頭函式看上去是匿名函式的一種簡寫,但實際上,箭頭函式和匿名函式有個明顯的區別:箭頭函式內部的this是詞法作用域,由上下文確定。

// 普通 this

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990 this指向obj物件
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined(因為在匿名函式的內部函式中)
        };
        return fn();
    }
};

// 箭頭函式this

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