JS箭頭函數(shù)應(yīng)該在什么情景下使用？

現(xiàn)代 JavaScript 中最引人注目的功能之一是引入了箭頭函數(shù)，用 => 來標(biāo)識。

這種函數(shù)有兩大優(yōu)點(diǎn) – 非常簡潔的語法，和更直觀的作用域和 this的綁定。

這些優(yōu)點(diǎn)有時導(dǎo)致箭頭函數(shù)比其他形式的函數(shù)聲明更受歡迎。

例如，受歡迎的 airbnb eslint 配置 會在您創(chuàng)建匿名函數(shù)時強(qiáng)制使用JavaScript箭頭函數(shù)。

然而，就像工程中的任何東西一樣，箭頭函數(shù)優(yōu)點(diǎn)很明顯，同時也帶來了一些負(fù)面的東西。 使用他們的時候需要權(quán)衡一下。

學(xué)習(xí)如何權(quán)衡是更好地使用箭頭函數(shù)的關(guān)鍵。

在本文中，我們將首先回顧箭頭函數(shù)的工作原理，然后深入研究箭頭函數(shù)改進(jìn)代碼的示例，最后深入研究箭不建議使用頭函數(shù)的示例。

JavaScript 箭頭函數(shù)究竟是什么？
JavaScript 箭頭函數(shù)大致相當(dāng)于 python 中的 lambda 函數(shù) 或 Ruby 中的 blocks。

這些是匿名函數(shù)，它們有自己的特殊語法，接受一定數(shù)量的參數(shù)，并在其封閉的作用域的上下文（即定義它們的函數(shù)或其他代碼）中操作。

讓我們依次分解這些部分。

箭頭函數(shù)語法
箭頭函數(shù)具有單一的總體結(jié)構(gòu)，然后在特殊情況下可以通過多種方式簡化它們。 核心結(jié)構(gòu)如下所示：

(argument1, argument2, ... argumentN) => {
// function body
}
括號內(nèi)的是參數(shù)列表，后跟“胖箭頭”（=>），最后是函數(shù)體。

這與傳統(tǒng)函數(shù)非常相似，我們只是省略 function 關(guān)鍵字并在參數(shù)后添加一個胖箭頭（=>）。

然而，有許多方法可以簡化箭頭函數(shù)。

首先，如果函數(shù)體是單個表達(dá)式，則可以不使用花括號并將其置于內(nèi)聯(lián)中（省略大括號直接將表達(dá)式寫在一行中）。 表達(dá)式的結(jié)果將由函數(shù)返回。 例如：

const add = (a, b) => a + b;
其次，如果只有一個參數(shù)，你甚至可以省略參數(shù)的括號。例如：

const getFirst = array => array[0];
正如您所看到的，這是一些非常簡潔的語法，我們將重點(diǎn)介紹后面的好處。

高級語法
有一些高級語法可以了解一下。

首先，如果您嘗試使用內(nèi)聯(lián)單行表達(dá)式語法，但您返回的值是對象字面量。您可能會認(rèn)為這看起來應(yīng)該是這樣的：

(name, description) => {name: name, description: description};
問題是這種語法比較含糊不清，容易引起歧義 ： 看起來好像你正試圖創(chuàng)建一個傳統(tǒng)的函數(shù)體。 如果你碰巧想要一個對象的單個表達(dá)式，請用括號包裹該對象：

(name, description) => ({name: name, description: description});
封閉的上下文作用域
與其他形式的函數(shù)不同，箭頭函數(shù)沒有自己的 執(zhí)行期上下文。

實(shí)際上，這意味著 this 和 arguments 都是從它們的父函數(shù)繼承而來的。

例如，使用和不使用箭頭函數(shù)比較以下代碼：

const test = {
name: 'test object',
createAnonFunction: function() {
return function() {
console.log(this.name);
console.log(arguments);
};
},

createArrowFunction: function() {
return () => {
console.log(this.name);
console.log(arguments);
};
}
};
我們有一個簡單的 test 對象，有兩個方法 – 每個方法都返回一個匿名函數(shù)。

不同之處在于第一個方法使用傳統(tǒng)函數(shù)表達(dá)式，而后者中使用箭頭函數(shù)。

如果我們使用相同參數(shù)，在控制臺中運(yùn)行它們，我們會得到完全不一樣的結(jié)果。

const anon = test.createAnonFunction('hello', 'world');
const arrow = test.createArrowFunction('hello', 'world');

anon();
undefined
{}

arrow();
test object
{ '0': 'hello', '1': 'world' }
第一個匿名函數(shù)有自己的函數(shù)上下文，因此當(dāng)您調(diào)用它時，test 對象的 this.name 沒有可用的引用，也沒有創(chuàng)建它時調(diào)用的參數(shù)。

另一個，箭頭函數(shù)具有與創(chuàng)建它的函數(shù)完全相同的函數(shù)上下文，使其可以訪問 argumetns 和 test 對象。

使用箭頭函數(shù)改進(jìn)您的代碼
傳統(tǒng) lambda 函數(shù)的主要用例之一，就是用于遍歷列表中的項(xiàng)，現(xiàn)在用 JavaScript 箭頭函數(shù)實(shí)現(xiàn)。

比如你有一個有值的數(shù)組，你想去 map 遍歷每一項(xiàng)，這時使用箭頭函數(shù)非常理想：

const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());
一個非常常見的例子是提取對象中的某個特定值：

const names = objects.map(object => object.name);
類似地，當(dāng)用現(xiàn)代迭代樣式取代傳統(tǒng)的 for 循環(huán)，一般我們使用 forEach 循環(huán)，箭頭函數(shù)能夠保持 this 來自于父級，讓他們非常直觀

類似的，當(dāng)用 forEach 來替換傳統(tǒng) for循環(huán)的時候，實(shí)際上箭頭函數(shù)會直觀的保持 this來自于父一級

this.examples.forEach(example => {
this.runExample(example);
});
Promises 和 Promise 鏈
箭頭函數(shù)的另一個可以使代碼更清晰，更直觀的地方是管理異步代碼。

Promises 使得管理異步代碼變得容易很多（即使你很歡快地使用 async / await，你仍然應(yīng)該理解 async / await 是建立在 Promises 之上的 ?。?/p>

但是，雖然使用 promises 仍然需要定義在異步代碼或調(diào)用完成后運(yùn)行的函數(shù)。

這是箭頭函數(shù)的理想位置，特別是如果您生成的函數(shù)是有狀態(tài)的，同時想引用對象中的某些內(nèi)容。 例如：

this.doSomethingAsync().then((result) => {
this.storeResult(result);
});
對象轉(zhuǎn)換
箭頭函數(shù)的另一個常見且極其強(qiáng)大的用途是封裝對象轉(zhuǎn)換。

例如，在 Vue.js 中，有一種通用模式，用于使用 mapState 將 Vuex 存儲的各個部分直接包含到 Vue 組件中。

這涉及定義一組 “mappers” ，這些 “mappers” 將從原始的完整的 state 對象轉(zhuǎn)換為提取所涉及組件所需的內(nèi)容。

這些簡單的轉(zhuǎn)換使用箭頭函數(shù)再合適不過了。比如：

export default {
computed: {
...mapState({
results: state => state.results,
users: state => state.users,
});
}
}
你不應(yīng)該使用箭頭函數(shù)的情景
在許多情況下，使用箭頭函數(shù)不是一個好主意。 他們不僅不會幫助你，而且會給你帶來一些不必要的麻煩。

第一個是對象的方法。 這是一個函數(shù)上下文的例子，這對于我們理解很有幫助。

有一段時間使用 Class（類）屬性語法和箭頭函數(shù)的組合，作為創(chuàng)建“自動綁定方法”的方式，例如， 事件處理程序可以使用，但仍然綁定到類的方法。

這看起來像是這樣的：

class Counter {
counter = 0;

handleClick = () => {
this.counter++;
}
}
這樣，即使 handleClick 由事件處理程序調(diào)用，而不是在 Counter 實(shí)例的上下文中調(diào)用，它仍然可以訪問實(shí)例的數(shù)據(jù)。

這種方法的缺點(diǎn)很多，在本文中很好地記錄。

雖然使用這種方法確實(shí)為您提供了具有綁定函數(shù)的快捷方式，但該函數(shù)以多種不直觀的方式運(yùn)行，如果您嘗試將此對象作為原型進(jìn)行子類化/使用，則會不利于測試，同時也會產(chǎn)生很多問題。

相反，使用常規(guī)函數(shù)，如果需要，將其綁定到構(gòu)造函數(shù)中的實(shí)例：

class Counter {
counter = 0;

handleClick() {
this.counter++;
}

constructor() {
this.handleClick = this.handleClick.bind(this);
}
}
深層的調(diào)用鏈
箭頭函數(shù)可能讓你遇到麻煩的另一個地方是，它們被用于許多不同的組合，特別是在函數(shù)深層調(diào)用鏈中。

核心原因與匿名函數(shù)相同 – 它們給出了非常糟糕的堆棧跟蹤。

如果你的函數(shù)只是向下一級，比如在迭代器里面，那也不是太糟糕，但是如果你把所有的函數(shù)定義為箭頭函數(shù)，并在它們之間來回調(diào)用，你就會陷入困境 遇到一個錯誤的時候，只是收到錯誤消息，如：

{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()
有動態(tài)上下文的函數(shù)
箭頭函數(shù)可能讓您遇到麻煩的最后一種情況就是嗎， this 是動態(tài)綁定的時候。

如果您在這些位置使用箭頭函數(shù)，那么動態(tài)綁定將不起作用，并且你（或稍后使用你的代碼的其他人）可能會對事情未按預(yù)期執(zhí)行的原因感到困惑。

一些典型的例子：

事件處理程序是通過將 this 設(shè)置為事件的 currentTarget 屬性來調(diào)用。
如果您仍在使用 jQuery ，則大多數(shù) jQuery 方法將 this 設(shè)置為已選擇的 dom 元素。
如果您正在使用 Vue.js ，則方法和計算函數(shù)通常將 this 設(shè)置為 Vue 組件。
當(dāng)然你可以故意使用箭頭函數(shù)來覆蓋這種行為，但特別是在 jQuery 和 Vue 的情況下，這通常會干擾正常運(yùn)行，讓你感到困惑的是為什么看起來與附近其他代碼相同的代碼不起作用。