前言

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

為什么叫Arrow Function？因為它的定義用的就是一個箭頭：

x => x * x

上面的箭頭函數相當于：

function (x) {return x * x;}

但箭頭函數帶來了些許問題，下面來一起看看吧。

關于{}

第一個問題是關于箭頭函數與{}。

箭頭函數，乍一看，用法似乎很簡單，比如像下面這樣用來給數組每一項乘以2：

const numbers = [1, 2, 3]; const result = numbers.map(n => n * 2); // produces [2,4,6]

但是，如果使用不當，可能會引發意想不到的問題。比如下面，嘗試為數組中每一項去產生對象字面量，看上去挺簡單的map操作，還是引發了意外。

const numbers = [1, 2, 3]; const result = numbers.map(n => { value: n }); // produces [undefined], [undefined], [undefined]

什么原因造成的呢？

稍微分析可知，引起上面問題在于，箭頭函數內部包裹在花括號之間的代碼，被認為是一段獨立的代碼塊而不是對象字面量，因此其單獨執行，顯然得到的結果就是一個全為undefined的數組。
于是，在這種情況下，其中的代碼就必須有明確的返回語句或者用圓括號()包括對象字面量。

const result = numbers.map(n => ({ value: n })); // [{value: 1}, {value:2}, {value:3}]

關于this

第二個問題是關于箭頭函數與this。

使用箭頭函數，你可以像下面這樣寫代碼而不用額外在局部作用域中去暫存this：

const adder = {  sum: 0,  add(numbers) {   numbers.forEach(n => {    this.sum += n;   });  } }; adder.add([1, 2, 3]); // adder.sum === 6

然而，很多時候你可能會自以為是的在不經意間寫錯。正如下面的代碼所示，this并不指向”adder”對象，而指向”adder”對象所在的作用域：

const adder = {  sum: 0,  add: (numbers) => { // scope here is important   numbers.forEach(n => {    this.sum += n;   });  } }; adder.add([1, 2, 3]); // adder.sum === 0

最后請記住一點：箭頭函數中的this繼承自外圍作用域的值，因此我們不能改變其指向。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。