JavaScript中，函數(shù)可以用箭頭“=>”來(lái)定義，稱之為箭頭函數(shù)，有時(shí)候也稱之為lambda表達(dá)式（lambda Expression）。箭頭函數(shù)是一個(gè)匿名函數(shù)，其語(yǔ)法比函數(shù)表達(dá)式更簡(jiǎn)潔，相比函數(shù)表達(dá)式，箭頭函數(shù)沒(méi)有自己的 this、arguments、super或new.target。箭頭函數(shù)更適用于那些需要匿名函數(shù)的地方，并且它不能用作構(gòu)造函數(shù)。

1.基礎(chǔ)語(yǔ)法

//多個(gè)參數(shù)
(param1, param2, …, paramN) => { statements }
//只有一個(gè)參數(shù)
(param) => { statements }
//當(dāng)只有一個(gè)參數(shù)時(shí)，圓括號(hào)可以省略
param => { statements }
//函數(shù)體只有一條 return語(yǔ)句
(param1, param2, …, paramN) => { return expression; }
//當(dāng)函數(shù)體只有一條 return語(yǔ)句時(shí)，可以省略 return關(guān)鍵字和函數(shù)體的花括號(hào)
(param1, param2, …, paramN) => expression
//沒(méi)有參數(shù)的函數(shù)必須寫(xiě)一對(duì)圓括號(hào)
() => { statements }

2.高級(jí)語(yǔ)法

//加圓括號(hào)的函數(shù)體返回對(duì)象字面量表達(dá)式
params => ({foo: bar})
//支持剩余參數(shù)和默認(rèn)參數(shù)
(param1, param2, …rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
    statements
}
//支持參數(shù)列表解構(gòu)
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();　// 6

3.箭頭函數(shù)不綁定 this

在普通函數(shù)中，this總是指向調(diào)用它的對(duì)象，如果是構(gòu)造函數(shù)，this指向創(chuàng)建的對(duì)象實(shí)例。箭頭函數(shù)本身沒(méi)有 this，但是它在聲明時(shí)可以捕獲其所在上下文的 this。例如：

var msg = "hello";
let func = () => {
    console.log(this.msg);
}；
func();//hello

在上面的代碼中，箭頭函數(shù)在全局作用域聲明，所以它捕獲全局作用域中的 this，this.msg即得到全局作用域中的 msg的值"hello"。

4.箭頭函數(shù)不會(huì)暴露arguments對(duì)象

普通函數(shù)調(diào)用后都具有一個(gè) arguments 對(duì)象存儲(chǔ)實(shí)際傳遞的參數(shù)，但是箭頭函數(shù)沒(méi)有這個(gè)對(duì)象。在大多數(shù)情況下，可以使用rest參數(shù)來(lái)代替arguments對(duì)象。例如：

念

ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。為什么叫Arrow Function？

因?yàn)樗亩x用的就是一個(gè)箭頭：

x => x * x

示例相當(dāng)于如下代碼：

function (x) {
    return x * x;
}

JavaScript箭頭函數(shù)是ECMAScript 6中引入的編寫(xiě)函數(shù)表達(dá)式的一種簡(jiǎn)便方法。

箭頭函數(shù)的語(yǔ)法如下：

(parameters) => { statements }

如果沒(méi)有參數(shù)，則表示一個(gè)箭頭函數(shù)，如下所示：

() => { statements }

當(dāng)您只有一個(gè)參數(shù)時(shí)，左括號(hào)是可選的：

parameters => { statements }

如果包含只返回返回表達(dá)式，請(qǐng)刪除方括號(hào)：

parameters => expression

帶來(lái)的好處

簡(jiǎn)潔的語(yǔ)法

讓我們看一下常規(guī)函數(shù)：

function funcName(params) { 
  return params + 2; 
}
funcName(2); // 4

然后通過(guò)箭頭函數(shù)精簡(jiǎn)之后為：

var funcName=params => params+2;
funcName(2); // 4

可以看到通過(guò)箭頭函數(shù)實(shí)現(xiàn)之后，語(yǔ)法更加精簡(jiǎn)。

不綁定this

與常規(guī)函數(shù)不同，箭頭函數(shù)不綁定this。相反，它是在詞匯上綁定的(即this保持其原始上下文的含義)。

由于JavaScript函數(shù)對(duì)this綁定的錯(cuò)誤處理，下面的例子無(wú)法得到預(yù)期結(jié)果：

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

但是，箭頭函數(shù)完全修復(fù)了this的指向，this總是指向詞法作用域，也就是外層調(diào)用者obj：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => 2020 - this.birth; // this指向obj對(duì)象
        return fn();
    }
};
obj.getAge(); // 30

使用箭頭函數(shù)的限制條件

應(yīng)用箭頭函數(shù)時(shí)要注意的一些限制條件：

如果你嘗試使用箭頭函數(shù)作為構(gòu)造函數(shù)，那么你會(huì)得到異常。請(qǐng)看下面的代碼：

var foo = (name, age) => { name = name, age = age };
var f1 = new foo("cat", 6);

代碼試圖通過(guò)使用箭頭函數(shù)foo作為構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象f1，JavaScript將拋出以下異常：

而且，當(dāng)你試圖輸出箭頭函數(shù)的原型值時(shí)，你會(huì)得到undefined的輸出：

var foo = (name, age) => { name = name, age = age };
console.log(foo.prototype);

發(fā)生這種情況的原因是因?yàn)榧^函數(shù)沒(méi)有原型屬性。請(qǐng)記?。弘m然箭頭函數(shù)為你提供了編寫(xiě)函數(shù)表達(dá)式的簡(jiǎn)短方法，但它沒(méi)有自己的this值，也不能用作構(gòu)造函數(shù)。

端小白Earl筆記

箭頭函數(shù)的基本語(yǔ)法

• 箭頭函數(shù)屬于函數(shù)表達(dá)式。箭頭函數(shù)表達(dá)式的寫(xiě)法與函數(shù)申明以及普通函數(shù)表達(dá)式的寫(xiě)法有所不同。

//函數(shù)申明
function f1(){
    console.log('普通函數(shù)')
}
function f2(a, b){
    return a + b;
}

//普通函數(shù)表達(dá)式
let f1 = function(){
    console.log('普通函數(shù)')
}
let f2 = function(a, b){
    return a + b;
}

//箭頭函數(shù)表達(dá)式
let f1 = () => {
    console.log('箭頭函數(shù)')
}
let f2 = (a, b) => {
    return a + b;
}

• 箭頭函數(shù)的函數(shù)體如果只有一個(gè)表達(dá)式，可以寫(xiě)成一行的簡(jiǎn)寫(xiě)體，省略return，直接返回該表達(dá)式。

//基礎(chǔ)語(yǔ)法
let f2 = (a, b) => {
    return a + b;
}

//簡(jiǎn)寫(xiě)體
let f2 = (a, b) => a + b

• 箭頭函數(shù)如果只有一個(gè)參數(shù)，可以省略小括號(hào)。

//基礎(chǔ)語(yǔ)法
let f3 = (a) => {
    return a + 1;
}
let f4 = (a) => {
    console.log(a);
}

//簡(jiǎn)寫(xiě)體
let f3 = a => a + 1
let f4 = a => {
    console.log(a);
}

• 箭頭函數(shù)的加小括號(hào)的函數(shù)體返回對(duì)象字面量表達(dá)式。

let f5 = age => ({Age: age})
console.log(f5(18))  // {Age: 18}

• 箭頭函數(shù)支持參數(shù)列表解構(gòu)。

let f6 = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c
f6()  // 6

箭頭函數(shù)的特點(diǎn)

• 箭頭函數(shù)表達(dá)式比普通函數(shù)表達(dá)式更簡(jiǎn)潔，指向性更強(qiáng)，可讀性更好。
• 箭頭函數(shù)屬于表達(dá)式函數(shù)，因此不存在函數(shù)提升。
• 箭頭函數(shù)相當(dāng)于匿名函數(shù)，不能作為構(gòu)造函數(shù)，不可以使用new命令。
• 箭頭函數(shù)沒(méi)有prototype屬性。
• 箭頭函數(shù)不綁定this，它只會(huì)從自己的作用域鏈的上一層繼承 this。

var user1={
  name:'earl',
  fullname:function(){ return this.name }  // 'earl' 這里的this指向user1
}

var user2={
  name:'earl',
  fullname:()=>this.name  //'' 箭頭函數(shù)沒(méi)有定義this綁定，這里的this指向window
}

var user3={
  name:'earl',
  sleep:function(){ 
    console.log(this)   // 這里的this指向user3
    var fn = ()=>{console.log(this)} // 這里的this也指向user3
    fn()
  }  
}

• 使用call,apply,bind并不會(huì)改變箭頭函數(shù)中的this指向。

window.name = "window_name";
let f1 = function () {
  return this.name
}
let f2 = () => this.name
let obj = { name: "obj_name" }

console.log(f1.call(obj))  //obj_name
console.log(f2.call(obj)) // window_name

• 箭頭函數(shù)不綁定arguments，它只會(huì)從自己的作用域鏈的上一層繼承arguments。箭頭函數(shù)可以使用剩余參數(shù)。