在es6中，箭頭“=>”指的是箭頭函數(shù)，是一種函數(shù)的簡(jiǎn)寫(xiě)方法，它將原函數(shù)的“function”關(guān)鍵字和函數(shù)名都刪掉，并使用“=>”連接參數(shù)列表和函數(shù)體；例語(yǔ)句“v=>v;”，就相當(dāng)于“function (v){return v;}”。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

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

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

通常函數(shù)的定義方法

var fn1 = function(a, b) {     return a + b }  function fn2(a, b) {     return a + b }

使用ES6箭頭函數(shù)語(yǔ)法定義函數(shù)，將原函數(shù)的“function”關(guān)鍵字和函數(shù)名都刪掉，并使用“=>”連接參數(shù)列表和函數(shù)體。

var fn1 = (a, b) => {     return a + b }  (a, b) => {     return a + b }

當(dāng)函數(shù)參數(shù)只有一個(gè)，括號(hào)可以省略；但是沒(méi)有參數(shù)時(shí)，括號(hào)不可以省略。

// 無(wú)參 var fn1 = function() {} var fn1 = () => {}  // 單個(gè)參數(shù) var fn2 = function(a) {} var fn2 = a => {}  // 多個(gè)參數(shù) var fn3 = function(a, b) {} var fn3 = (a, b) => {}  // 可變參數(shù) var fn4 = function(a, b, ...args) {} var fn4 = (a, b, ...args) => {}

箭頭函數(shù)相當(dāng)于匿名函數(shù)，并且簡(jiǎn)化了函數(shù)定義。箭頭函數(shù)有兩種格式，一種只包含一個(gè)表達(dá)式，省略掉了{(lán) … }和return。還有一種可以包含多條語(yǔ)句，這時(shí)候就不能省略{ … }和return

() => return 'hello' (a, b) => a + b

(a) => {   a = a + 1   return a }

如果返回一個(gè)對(duì)象，需要特別注意，如果是單表達(dá)式要返回自定義對(duì)象，不寫(xiě)括號(hào)會(huì)報(bào)錯(cuò)，因?yàn)楹秃瘮?shù)體的{ … }有語(yǔ)法沖突。

注意，用小括號(hào)包含大括號(hào)則是對(duì)象的定義，而非函數(shù)主體

x => {key: x} // 報(bào)錯(cuò) x => ({key: x}) // 正確

箭頭函數(shù)看上去是匿名函數(shù)的一種簡(jiǎn)寫(xiě)，但實(shí)際上，箭頭函數(shù)和匿名函數(shù)有個(gè)明顯的區(qū)別：箭頭函數(shù)內(nèi)部的this是詞法作用域，由上下文確定。（詞法作用域就是定義在詞法階段的作用域。換句話(huà)說(shuō)，詞法作用域是由你在寫(xiě)代碼時(shí)將變量和塊作用域?qū)懺谀睦飦?lái)決定的，因此當(dāng)詞法分析器處理代碼時(shí)會(huì)保持作用域不變 。）

非箭頭函數(shù)

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

由于this在箭頭函數(shù)中已經(jīng)按照詞法作用域綁定了，所以，用call()或者apply()調(diào)用箭頭函數(shù)時(shí)，無(wú)法對(duì)this進(jìn)行綁定，即傳入的第一個(gè)參數(shù)被忽略

JavaScript中的每一個(gè)Function對(duì)象都有一個(gè)apply()方法和一個(gè)call()方法

apply調(diào)用一個(gè)對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。例如：B.apply(A, arguments)；即A對(duì)象調(diào)用B對(duì)象的方法。func.apply(thisArg, [argsArray])
call調(diào)用一個(gè)對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。例如：B.call(A, args1,args2)；即A對(duì)象調(diào)用B對(duì)象的方法。func.call(thisArg, arg1, arg2, …)

詳見(jiàn)《JavaScript中apply()和call()的區(qū)別和應(yīng)用》

非箭頭函數(shù)，調(diào)用call()時(shí)打印的數(shù)據(jù)

使用箭頭函數(shù)之后，不再需要以前hack的寫(xiě)法，var that = this。但不能盲目的使用ES6箭頭函數(shù)，請(qǐng)看下一節(jié)《正確使用箭頭函數(shù)——什么時(shí)候不該用ES6箭頭函數(shù)》。

總結(jié)

• 類(lèi)似于匿名函數(shù)，在某些情況下使用，可減少代碼量

• 代碼簡(jiǎn)潔，this提前定義

• 代碼太過(guò)簡(jiǎn)潔，導(dǎo)致不好閱讀

• this提前定義，導(dǎo)致無(wú)法使用js進(jìn)行一些在ES5里面看起來(lái)非常正常的操作（若使用箭頭函數(shù)，在監(jiān)聽(tīng)點(diǎn)擊事件的回調(diào)函數(shù)中，就無(wú)法獲取到當(dāng)前點(diǎn)擊的元素咯，詳見(jiàn)《正確使用箭頭函數(shù)——什么時(shí)候不該用ES6箭頭函數(shù)》）

• 總的來(lái)說(shuō)，箭頭函數(shù)只是一種函數(shù)的簡(jiǎn)寫(xiě)，有其利弊，可用可不用，看大家心情，當(dāng)然也得用的正確

【推薦學(xué)習(xí)：javascript高級(jí)教程】