javascript ES6中箭頭函數注意細節有哪些

小編給大家分享一下javascript ES6中箭頭函數注意細節有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

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繼承自外圍作用域的值，因此我們不能改變其指向。

以上是“javascript ES6中箭頭函數注意細節有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！