摘要：說(shuō)明箭頭函數(shù)本質(zhì)還是函數(shù)，我們來(lái)看看他與中普通函數(shù)的區(qū)別，先看看寫(xiě)法上的區(qū)別。箭頭函數(shù)會(huì)捕獲其所在上下文的值，作為自己的值。箭頭函數(shù)不可變。這些方法也無(wú)法改變箭頭函數(shù)的指向。箭頭函數(shù)不能用關(guān)鍵字來(lái)實(shí)例化對(duì)象，不然會(huì)報(bào)錯(cuò)。

箭頭函數(shù)本質(zhì)還是函數(shù)，我們來(lái)看看他與JavaScript中普通函數(shù)的區(qū)別，先看看寫(xiě)法上的區(qū)別。

寫(xiě)箭頭函數(shù)，我們記住一個(gè)順序就好，參數(shù)、箭頭、函數(shù)體、這個(gè)順序記住就足夠了，參數(shù)、箭頭、函數(shù)體、這三個(gè)是必須的，函數(shù)名可以沒(méi)有，但這三項(xiàng)必須有，一些簡(jiǎn)寫(xiě)的方式也是簡(jiǎn)寫(xiě)這三項(xiàng)里的東西。

1、只有一個(gè)參數(shù)時(shí)，() 可省略

//不簡(jiǎn)寫(xiě)
var demo = (x) =>{
    console.log(x);
}

//簡(jiǎn)寫(xiě)
var demo = x =>{
    console.log(x);
}

2、函數(shù)體只有一句時(shí)， {} 可以省略

//不簡(jiǎn)寫(xiě)
var demo = (x) =>{
    console.log(x);
}

//簡(jiǎn)寫(xiě)
var demo = x => console.log(x);

3、函數(shù)體只有一條返回語(yǔ)句時(shí)，{} 和 return 都可以省略

//不簡(jiǎn)寫(xiě)
var demo = (x) => {
     return x;
}

//簡(jiǎn)寫(xiě)
var demo = (x) => x;   

//注意別寫(xiě)成這樣  
var demo = (x) =>{ x };  
//或者 這樣  
var demo = (x) => return  x;  
//要省略就都省略，不省略就都不省，別省一半,不然會(huì)出錯(cuò)的。

注意：
箭頭函數(shù)放 參數(shù) 的地方就在 () 內(nèi)，
沒(méi)有參數(shù)，() 必須寫(xiě)，
一個(gè)參數(shù)，() 可寫(xiě)可不寫(xiě)，
多個(gè)參數(shù)，() 必須寫(xiě)。

箭頭函數(shù)放 函數(shù)體 的地方在 {}內(nèi)，
函數(shù)體 就 一句 {} 可寫(xiě)可不寫(xiě)，
函數(shù)體 不止一句，{} 必須寫(xiě)。

如果不知道，() {} 寫(xiě)不寫(xiě)，該不該省略，那就寫(xiě)，寫(xiě)了不會(huì)錯(cuò)。

箭頭函數(shù) 如果要返回一個(gè)對(duì)象，要簡(jiǎn)寫(xiě)的話， 需要用()包住這個(gè)對(duì)象

//不簡(jiǎn)寫(xiě)
var demo = () =>{ 
    return {x:1};
}  

//簡(jiǎn)寫(xiě)
var demo = () =>({x:1});

為什么會(huì)這樣？因?yàn)槿绻患?() ，那{ } 就表示的是語(yǔ)法塊，不是表示一個(gè)對(duì)象，而加上()，按照規(guī)范來(lái)說(shuō)，() 里面 { } 就會(huì)被解析為對(duì)象了。

對(duì)于 {x:1} 這個(gè)情況，他不僅可以表示一個(gè)對(duì)象，這個(gè)對(duì)象有個(gè)x屬性，值為1，也可以表示為語(yǔ)法塊中含有 名為 x 的 label，忘記 label語(yǔ)法的話，可以看這里
如果不是很明白，可以看看這個(gè)回答，應(yīng)該會(huì)理解的更加深刻。
https://www.zhihu.com/questio...
所以這也解釋了為什么會(huì)出現(xiàn)下面代碼中的情況

// 不報(bào)錯(cuò)
var demo = () =>{x:1};

// 報(bào)錯(cuò)
var demo = (y) =>{y,x:1};

對(duì)象的方法用 箭頭函數(shù)寫(xiě)時(shí)，this 的指向 可能和你想的不一樣

window.name="window";
var obj = {
    name:"obj",
    show_name:() =>{
        console.log(this.name);
    }    
}
obj.show_name(); //window

JavaScript使用的是函數(shù)作用域，在上面這段代碼中對(duì)象的括號(hào)是不能封閉作用域的，所以此時(shí)的this還是指向window。
我們換成普通函數(shù)看看

window.name="window";
var obj = {
    name:"obj",
    show_name: function (){
        console.log(this.name);
    }    
}
obj.show_name();  //obj

換成普通函數(shù)，this 就不是指向window，而是指向 obj 對(duì)象了

箭頭函數(shù) 與 普通函數(shù) 其他的區(qū)別

1、箭頭函數(shù)沒(méi)有自己的this。箭頭函數(shù)會(huì)捕獲其所在上下文的  this 值，作為自己的 this 值。   
2、箭頭函數(shù) this 不可變。call()、apply()、bind()、這些方法也 無(wú)法改變 箭頭函數(shù) this 的指向。
3、箭頭函數(shù) 不能用 new  關(guān)鍵字來(lái)實(shí)例化對(duì)象，不然會(huì)報(bào)錯(cuò)。 
4、箭頭函數(shù)沒(méi)有arguments對(duì)象。

1、箭頭函數(shù)沒(méi)有自己的this。箭頭函數(shù)會(huì)捕獲其所在上下文的 this 值，作為自己的 this 值。

window.name = "window";
var obj = {
    name:"obj",
    show_name:function (){
        function fn (){
            console.log(this.name);
        }
        fn();
    },
}
obj.show_name();  // window

聲明一個(gè) obj 對(duì)象，有一個(gè)name屬性 與 show_name方法，上面這段代碼，我的本意是想顯示 obj對(duì)象的name， 但是沒(méi)和我想的一樣，一般我們會(huì)用 一個(gè)變量 self 或者 that 之類(lèi)的留住this,像這樣

window.name = "window";
var obj = {
    name:"obj",
    show_name:function (){
        //留住this
        var that = this;
        function fn (){
            console.log(that.name);
        }
        fn();
    },
}
obj.show_name();  //obj

通常來(lái)說(shuō)，箭頭函數(shù)內(nèi)部的this就是外層代碼塊的this

window.name = "window";
var obj = {
    name:"obj",
    show_name:function (){
        var fn = () => {
            console.log(this.name);
        }
        fn();
    },
}
obj.show_name(); //obj

2、箭頭函數(shù) this 不可變。call()、apply()、bind()、這些方法也 無(wú)法改變 箭頭函數(shù) this 的指向。

window.name = "window";
var obj = {
    name:"obj",
}
function show_name(){
    //這里 show_name 是一個(gè)普通的全局函數(shù)，所以他的this指window
    console.log(this.name);
}
//用了 call 方法，把 show_nam 的this 指向了 obj 對(duì)象
show_name.call(obj);  //obj

箭頭函數(shù) this 不可變

window.name = "window";
var obj = {
    name:"obj",
}
var show_name = () => {
    //這里 show_name 是箭頭函數(shù)，他的this指window，并且不會(huì)變
    console.log(this.name);
}
//用了 call 方法，但是 this 沒(méi)變，所以打印了 window
show_name.call(obj);  //window

3、箭頭函數(shù) 不能用 new 關(guān)鍵字來(lái)實(shí)例化對(duì)象，不然會(huì)報(bào)錯(cuò)，箭頭函數(shù)的this 不可變，new 也改變不了 this的 指向，而且更為重要的是，箭頭函數(shù)內(nèi)部并沒(méi)有 [[Construct]] 方法，所以會(huì)沒(méi)有原型屬性（prototype），所以箭頭函數(shù)沒(méi)法當(dāng)構(gòu)造函數(shù)。

4、箭頭函數(shù)沒(méi)有arguments對(duì)象，不能通過(guò)arguments對(duì)象訪問(wèn)傳入?yún)?shù)，但是可以用rest參數(shù)實(shí)現(xiàn)
rest參數(shù)，剩余參數(shù)，不了解的朋友看這里

var demo = (...theArgs) => theArgs;
demo(1,2,3); //[1,2,3]

在來(lái)看一遍 箭頭函數(shù) 與 普通函數(shù)，除了寫(xiě)法上的區(qū)別

1、箭頭函數(shù)沒(méi)有自己的this。箭頭函數(shù)會(huì)捕獲其所在上下文的  this 值，作為自己的 this 值。   
2、箭頭函數(shù) this 不可變。call()、apply()、bind()、這些方法也 無(wú)法改變 箭頭函數(shù) this 的指向。
3、箭頭函數(shù) 不能用 new  關(guān)鍵字來(lái)實(shí)例化對(duì)象，不然會(huì)報(bào)錯(cuò)。 
4、箭頭函數(shù)沒(méi)有arguments對(duì)象。

可以看出，最重要的區(qū)別還是 在 this 上，所以要想用好 箭頭函數(shù)，還是要對(duì) this 有一定認(rèn)識(shí)的，朋友們繼續(xù)努力吧！