快捷導(dǎo)航

javascript ES6中箭頭函數(shù)注意細(xì)節(jié)小結(jié)

更新時間：2017年02月17日 08:39:29 作者：xishiyi7

這篇文章主要給大家總結(jié)了關(guān)于javascript ES6中箭頭函數(shù)注意細(xì)節(jié)的相關(guān)資料，文中介紹的比較詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

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

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

x => x * x

上面的箭頭函數(shù)相當(dāng)于：

function (x) {
return x * x;
}

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

關(guān)于{}

第一個問題是關(guān)于箭頭函數(shù)與{}。

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

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

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

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

什么原因造成的呢？

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

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

關(guān)于this

第二個問題是關(guān)于箭頭函數(shù)與this。

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

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

然而，很多時候你可能會自以為是的在不經(jīng)意間寫錯。正如下面的代碼所示，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

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

總結(jié)

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

您可能感興趣的文章: