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

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

創(chuàng)新互聯(lián)主營(yíng)新平網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,App定制開發(fā),新平h5小程序設(shè)計(jì)搭建,新平網(wǎng)站營(yíng)銷推廣歡迎新平等地區(qū)企業(yè)咨詢

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

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

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

然而，就像工程中的任何東西一樣，箭頭函數(shù)優(yōu)點(diǎn)很明顯，同時(shí)也帶來了一些負(fù)面的東西。 使用他們的時(shí)候需要權(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ǎn)化它們。 核心結(jié)構(gòu)如下所示：

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

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

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

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

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

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

高級(jí)語法
有一些高級(jí)語法可以了解一下。

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

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

(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);
};
}
};
我們有一個(gè)簡(jiǎn)單的 test 對(duì)象，有兩個(gè)方法 – 每個(gè)方法都返回一個(gè)匿名函數(shù)。

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

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

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

anon();
undefined
{}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

有一段時(shí)間使用 Class（類）屬性語法和箭頭函數(shù)的組合，作為創(chuàng)建“自動(dò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)行，如果您嘗試將此對(duì)象作為原型進(jìn)行子類化/使用，則會(huì)不利于測(cè)試，同時(shí)也會(huì)產(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ù)可能讓你遇到麻煩的另一個(gè)地方是，它們被用于許多不同的組合，特別是在函數(shù)深層調(diào)用鏈中。

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

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

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

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

一些典型的例子：

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

網(wǎng)頁名稱：JS箭頭函數(shù)應(yīng)該在什么情景下使用？
轉(zhuǎn)載注明：http://muchs.cn/article12/ihsddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃、動(dòng)態(tài)網(wǎng)站、商城網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)