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

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

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

基礎語法

通常函數的定義方法

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

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

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

當函數參數只有一個，括號可以省略；但是沒有參數時，括號不可以省略。

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

箭頭函數相當于匿名函數，并且簡化了函數定義。箭頭函數有兩種格式，一種只包含一個表達式，省略掉了{ … }和return。還有一種可以包含多條語句，這時候就不能省略{ … }和return

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

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

如果返回一個對象，需要特別注意，如果是單表達式要返回自定義對象，不寫括號會報錯，因為和函數體的{ … }有語法沖突。

注意，用小括號包含大括號則是對象的定義，而非函數主體

x => {key: x} // 報錯 x => ({key: x}) // 正確

箭頭函數看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法作用域，由上下文確定。（詞法作用域就是定義在詞法階段的作用域。換句話說，詞法作用域是由你在寫代碼時將變量和塊作用域寫在哪里來決定的，因此當詞法分析器處理代碼時會保持作用域不變 。）

非箭頭函數

現在，箭頭函數完全修復了this的指向，this總是指向詞法作用域，也就是外層調用者Person

由于this在箭頭函數中已經按照詞法作用域綁定了，所以，用call()或者apply()調用箭頭函數時，無法對this進行綁定，即傳入的第一個參數被忽略

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

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

詳見《JavaScript中apply()和call()的區別和應用》

非箭頭函數，調用call()時打印的數據

使用箭頭函數之后，不再需要以前hack的寫法，var that = this。但不能盲目的使用ES6箭頭函數，請看下一節《正確使用箭頭函數——什么時候不該用ES6箭頭函數》。

總結

• 類似于匿名函數，在某些情況下使用，可減少代碼量

• 代碼簡潔，this提前定義

• 代碼太過簡潔，導致不好閱讀

• this提前定義，導致無法使用js進行一些在ES5里面看起來非常正常的操作（若使用箭頭函數，在監聽點擊事件的回調函數中，就無法獲取到當前點擊的元素咯，詳見《正確使用箭頭函數——什么時候不該用ES6箭頭函數》）

• 總的來說，箭頭函數只是一種函數的簡寫，有其利弊，可用可不用，看大家心情，當然也得用的正確

【推薦學習：javascript高級教程】