快捷導(dǎo)航

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

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

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

前言

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

為什么叫Arrow Function？因?yàn)樗亩x用的就是一個(gè)箭頭：

x => x * x

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

function (x) {
return x * x;
}

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

關(guān)于{}

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

箭頭函數(shù)，乍一看，用法似乎很簡(jiǎn)單，比如像下面這樣用來(lái)給數(shù)組每一項(xiàng)乘以2：

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

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

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

什么原因造成的呢？

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

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

關(guān)于this

第二個(gè)問(wèn)題是關(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

然而，很多時(shí)候你可能會(huì)自以為是的在不經(jīng)意間寫錯(cuò)。正如下面的代碼所示，this并不指向”adder”對(duì)象，而指向”adder”對(duì)象所在的作用域：

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

 };

 adder.add([1, 2, 3]);
 // adder.sum === 0

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

總結(jié)

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

您可能感興趣的文章: