淺談箭頭函數

ES6新引入了箭頭函數，它是一種表達簡潔的函數，下面咱們來看看它有哪三個顯著優點。
假設定義了一個名爲names的數組，以下：

如今須要給數組的每一項後面添加’Bos’這個字符串，若是用傳統的函數語句來實現，咱們會這麼作：

（小注：由於用了模板字符串因此此例中使用了重音符’ ` ’）

那麼，使用箭頭函數能夠怎麼作？第一步，用 => 替代 function ：

第二步，當參數僅有一個的時候，能夠把括弧省略，以下：

是否是看上去簡潔了些？

第三步：無需顯示地寫return語句，箭頭函數內置 return 功能。即，若是你只想使用箭頭函數返回什麼東西的話，那麼無需顯示地寫出 return 。以下：

這一步，除了刪除return語句以外，還把花括號也刪除了，而且把多行代碼濃縮成一行。是否是很是簡潔？但在這須要注意的是，之因此刪除花括號，是由於函數體內僅有一句想要返回的語句。

當函數沒有參數的時候，箭頭函數還能夠更進一步的簡潔，即把括弧給去掉，換成下劃線’_’。以下：

此處因爲不須要形參，咱們把括弧’ ( ) ’刪除用’ _ ’ 替代來僞裝變量名，實際上你能夠在此用任何你想用的變量名，反正他們也不會真正被用上。好比：

它們返回的都是’Cool Bos’組成的數組而已。

箭頭函數中的this關鍵字，指向的是定義時的對象，而不是使用時的對象。即，雖然在以往的函數中，this所指的對象只有在調用的時候才知道是誰，可是在箭頭函數中，它是固定不變的。咱們拿兩個例子來比對一下：

傳統函數

不管輸出多少次p.age的值，都是0。由於做爲Person構造函數實例的p對象，纔是this所指的對象，而age這個私有屬性在構造函數中已經定義，this.age的值即是0。

箭頭函數

而用箭頭函數改寫後，打印出的p.age值每一次都不相同，每當過去1秒，它的值+1。

咱們再來三個例子說明一下：

構造函數裏嵌套定時器的傳統寫法

可看到，函數體裏最後一行this.val打印出來是0，可是定時器裏每隔1秒打印出來的是值是NaN，由於在定時器裏面的this指向的是window，而後在全局環境下並無找到window.val的值，因此是NaN。

對上面的函數稍做修改

在全局做用域下定義val這個變量，並給其賦值-10。
從結果能夠看出，每隔1秒打印出來的值是全局做用域下的-10累加增1。

來看看箭頭函數的狀況

能夠發如今定時器這個匿名函數做用域裏，this所指向的對象，就是定義時所指的對象。對於構造函數來講，它就是Fn的實例p。因此，this.val的值基於0，每隔1秒增1。

最後補充一點：目前的JavaScript版本把全部箭頭函數當成匿名函數，但咱們能夠用一個變量指向匿名函數，以這種方式來仿造聲明函數（本文中的示例函數就是如此）。以下：

據此，總結箭頭函數的三個優勢： 1. 語法簡潔，可以寫出漂亮的單行函數。2. 內置return語句，當函數只想返回某個東西的時候，能夠沒必要顯現地寫出return。3.this關鍵字無需從新指定，這在進行事件綁定時會頗有幫助。

須要補充的是，箭頭函數裏面沒有arguments參數，若是須要用到，能夠這麼寫(...arguments) => {...}。可是這種方法在嚴格模式下不適用。

翻譯自：http://wesbos.com/arrow-funct...