摘要：換句話說(shuō)，箭頭函數(shù)構(gòu)造函數(shù)調(diào)用沒(méi)有意義，而且是模糊的。讓我們看看如果嘗試這樣做會(huì)發(fā)生什么執(zhí)行，其中是一個(gè)箭頭函數(shù)，拋出一個(gè)錯(cuò)誤，不能用作構(gòu)造函數(shù)。當(dāng)需要?jiǎng)討B(tài)上下文時(shí)，不能使用箭頭函數(shù)定義方法，使用構(gòu)造函數(shù)創(chuàng)建對(duì)象，在處理事件時(shí)從獲取目標(biāo)。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

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

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

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

在JS中，方法是存儲(chǔ)在對(duì)象屬性中的函數(shù)。當(dāng)調(diào)用該方法時(shí)，this 將指向該方法所屬的對(duì)象。

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

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)用時(shí)，calculate.sum() 會(huì)拋出一個(gè)TypeError，因?yàn)?b>this.array 為undefined。

當(dāng)調(diào)用calculate對(duì)象上的方法sum()時(shí)，上下文仍然是 window。之所以會(huì)發(fā)生這種情況，是因?yàn)榧^函數(shù)按詞法作用域?qū)⑸舷挛慕壎ǖ?window 對(duì)象。

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

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

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

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

同樣的規(guī)則也適用于在原型對(duì)象上定義方法。使用一個(gè)箭頭函數(shù)來(lái)定義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ù)表達(dá)式：

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)用時(shí)將上下文更改為cat對(duì)象：cat.sayCatName()。

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

但是，箭頭函數(shù)會(huì)在聲明上靜態(tài)綁定上下文，并且無(wú)法使其動(dòng)態(tài)化，但這種方式有壞也有好，有時(shí)候我們需要?jiǎng)討B(tài)綁定。

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

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

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

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

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

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

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

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

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

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

讓我們看看如果嘗試這樣做會(huì)發(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是一個(gè)箭頭函數(shù)，JavaScript拋出一個(gè) TypeError 錯(cuò)誤，Message不能用作構(gòu)造函數(shù)。

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

const Message = function(text) {
  this.text = text;
};
const helloMessage = new Message("Hello World!");

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

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

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

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

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

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

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

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

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

在簡(jiǎn)短和冗長(zhǎng)之間找到一個(gè)平衡點(diǎn)是很好的，這樣可以使代碼更加直觀。

毫無(wú)疑問(wèn)，箭頭函數(shù)是一個(gè)很好的補(bǔ)充。當(dāng)正確使用時(shí)，它會(huì)使前面必須使用.bind()或試圖捕獲上下文的地方變得簡(jiǎn)單，它還簡(jiǎn)化了代碼。

某些情況下的優(yōu)點(diǎn)會(huì)給其他情況帶來(lái)不利。 當(dāng)需要?jiǎng)討B(tài)上下文時(shí)，不能使用箭頭函數(shù)：定義方法，使用構(gòu)造函數(shù)創(chuàng)建對(duì)象，在處理事件時(shí)從 this 獲取目標(biāo)。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

干貨系列文章匯總?cè)缦拢X(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。

附：新文章會(huì)提前一天發(fā)到公眾號(hào)