概述

這些年來，ES6 將js的可用性提升到一個新的水平時: 箭頭函數(shù)、類等等,這些都很棒。

箭頭函數(shù)是最有價值的新功能之一，有很多好文章描述了它的上下文透明性和簡短的語法。

但每個事務(wù)都有兩面。通常，新特性會帶來一些混亂，其中之一就是箭頭函數(shù)被誤導(dǎo)了。本文將介紹一些場景，在這些場景中，你應(yīng)該繞過箭頭函數(shù)，轉(zhuǎn)而使用良好的舊函數(shù)表達式或較新的簡寫語法。并且要注意縮短代碼，因為這會影響代碼的可讀性。

定義對象上的方法

在js中，方法是存儲在對象屬性中的函數(shù)。當調(diào)用該方法時，this將指向該方法所屬的對象。

Object literal

由于箭頭函數(shù)語法簡短，所以使用它來定義方法是很有吸引力的，讓咱們來試一試：

const calculate = { array: [1, 2, 3], sum: () => { console.log(this === window); // => true return this.array.reduce((result, item) => result + item); }};console.log(this === window); // => true// Throws 'TypeError: Cannot read property ’reduce’ of undefined'calculate.sum();

calculate.sum方法用箭頭函數(shù)定義。 但是在調(diào)用時，calculate.sum()會拋出一個TypeError，因為this.array為undefined。

當調(diào)用calculate對象上的方法sum()時，上下文仍然是window。之所以會發(fā)生這種情況，是因為箭頭函數(shù)按詞法作用域?qū)⑸舷挛慕壎ǖ絯indow對象。

執(zhí)行this.array等同于window.array，它是undefined。

解決方法是使用常規(guī)函數(shù)表達式來定義方法。 this 是在調(diào)用時確定的，而不是由封閉的上下文決定的，來看看修復(fù)后的版本：

const calculate = { array: [1, 2, 3], sum() { console.log(this === calculate); // => true return this.array.reduce((result, item) => result + item); }};calculate.sum(); // => 6

因為sum是常規(guī)函數(shù)，所以在調(diào)用calculate.sum()時this是calculate對象。this.array是數(shù)組引用，因此正確計算元素之和：6。

Object prototype

同樣的規(guī)則也適用于在原型對象上定義方法。使用一個箭頭函數(shù)來定義sayCatName方法，this指向window

function MyCat(name) { this.catName = name;}MyCat.prototype.sayCatName = () => { console.log(this === window); // => true return this.catName;};const cat = new MyCat(’Mew’);cat.sayCatName(); // => undefined

使用早期的方式定義函數(shù)表達式：

function MyCat(name) { this.catName = name;}MyCat.prototype.sayCatName = function() { console.log(this === cat); // => true return this.catName;};const cat = new MyCat(’Mew’);cat.sayCatName(); // => ’Mew’

sayCatName常規(guī)函數(shù)在作為方法調(diào)用時將上下文更改為cat對象：cat.sayCatName()。

動態(tài)上下文的回調(diào)函數(shù)

this在JS中是一個強大的特性，它允許根據(jù)調(diào)用函數(shù)的方式更改上下文。通常，上下文是調(diào)用發(fā)生的目標對象，這使得代碼更加自然，就像這個對象發(fā)生了什么。

但是，箭頭函數(shù)會在聲明上靜態(tài)綁定上下文，并且無法使其動態(tài)化，但這種方式有壞也有好，有時候我們需要動態(tài)綁定。

在客戶端編程中，將事件偵聽器附加到DOM元素是一項常見的任務(wù)。事件觸發(fā)處理程序函數(shù)，并將this作為目標元素,這里如果使用箭頭函數(shù)就不夠靈活。

下面的示例嘗試為這樣的處理程序使用箭頭函數(shù)：

const button = document.getElementById(’myButton’);button.addEventListener(’click’, () => { console.log(this === window); // => true this.innerhtml = ’Clicked button’;});

在全局上下文中this指向window。 當發(fā)生單擊事件時，瀏覽器嘗試使用按鈕上下文調(diào)用處理函數(shù)，但箭頭函數(shù)不會更改其預(yù)定義的上下文。this.innerhtml相當于window.innerHTML，沒有任何意義。

必須應(yīng)用函數(shù)表達式，該表達式允許根據(jù)目標元素更改this：

const button = document.getElementById(’myButton’);button.addEventListener(’click’, function() { console.log(this === button); // => true this.innerHTML = ’Clicked button’;});

當用戶單擊按鈕時，處理程序函數(shù)中的this指向button。因此這個問題。innerHTML = ’Clicked button’正確地修改按鈕文本以反映已單擊狀態(tài)。

調(diào)用構(gòu)造函數(shù)

this在構(gòu)造調(diào)用中是新創(chuàng)建的對象。當執(zhí)行new MyFunction()時，構(gòu)造函數(shù)MyFunction的上下文是一個新對象:this instanceof MyFunction === true。

注意，箭頭函數(shù)不能用作構(gòu)造函數(shù)。JavaScript通過拋出異常隱式阻止這樣做。

無論如何，this是來自封閉上下文的設(shè)置，而不是新創(chuàng)建的對象。換句話說，箭頭函數(shù)構(gòu)造函數(shù)調(diào)用沒有意義，而且是模糊的。

讓我們看看如果嘗試這樣做會發(fā)生什么:

const Message = (text) => { this.text = text;};// Throws 'TypeError: Message is not a constructor'const helloMessage = new Message(’Hello World!’);

執(zhí)行new Message(’Hello World!’)，其中Message是一個箭頭函數(shù)，JavaScript拋出一個TypeError錯誤，Message不能用作構(gòu)造函數(shù)。

上面的例子可以使用函數(shù)表達式來修復(fù)，這是創(chuàng)建構(gòu)造函數(shù)的正確方法(包括函數(shù)聲明)：

const Message = function(text) { this.text = text;};const helloMessage = new Message(’Hello World!’);簡寫語法

箭頭函數(shù)有一個很好的屬性，它可以省略參數(shù)圓括號()、塊大括號{}，如果函數(shù)主體只有一條語句，則返回。這有助于編寫非常短的函數(shù)。

原文作者的大學(xué)編程教授給學(xué)生一個有趣的任務(wù)：編寫 用C語言計算字符串長度的最短函數(shù)，這是學(xué)習和探索新語言的好方式。

然而，在實際應(yīng)用程序中，許多開發(fā)人員都會閱讀代碼。 最短的語法并不總是適合幫助你的同事即時了解該方法的用途。

在某種程度上，簡寫的函數(shù)變得難以閱讀，所以盡量不要過度使用。讓各位們看一個例子

const multiply = (a, b) => b === undefined ? b => a * b : a * b;const double = multiply(2);double(3); // => 6multiply(2, 3); // => 6

multiply返回兩個數(shù)字的乘法結(jié)果或與第一個參數(shù)綁定的閉包，以便以后的乘法運算。

該函數(shù)運行良好，看起來很短。但從一開始就很難理解它是做什么的。

為了使其更具可讀性，可以從箭頭函數(shù)恢復(fù)可選花括號和return語句，或使用常規(guī)函數(shù)：

function multiply(a, b) { if (b === undefined) { return function(b) { return a * b; } } return a * b;}const double = multiply(2);double(3); // => 6multiply(2, 3); // => 6

在簡短和冗長之間找到一個平衡點是很好的，這樣可以使代碼更加直觀。

總結(jié)

毫無疑問，箭頭函數(shù)是一個很好的補充。當正確使用時，它會使前面必須使用.bind()或試圖捕獲上下文的地方變得簡單，它還簡化了代碼。

某些情況下的優(yōu)點會給其他情況帶來不利。 當需要動態(tài)上下文時，不能使用箭頭函數(shù)：定義方法，使用構(gòu)造函數(shù)創(chuàng)建對象，在處理事件時從this獲取目標。

以上就是JS什么場景不適合箭頭函數(shù)的詳細內(nèi)容，更多關(guān)于JS的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！