本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)

ES6箭頭函數(shù)似乎是一種很上癮的函數(shù)，一旦了解你很容易用到停不下來。作為2015年ECMAScript 6更新的一部分，箭頭函數(shù)有充分理由迅速流行。箭頭函數(shù)語法是極好的語法糖，能解決很多需求：

• 函數(shù)關(guān)鍵字
• 花括號(hào)
• return關(guān)鍵字(對(duì)于單行函數(shù))

此外，箭頭函數(shù)還降低了JavaScript的函數(shù)范圍以及this關(guān)鍵字的部分復(fù)雜性，因?yàn)橛袝r(shí)真正需要的只是一個(gè)匿名函數(shù)。

[[324242]]

但事實(shí)上，箭頭函數(shù)并不一定能解決編寫JavaScript函數(shù)時(shí)的每一項(xiàng)需求。“萬金油”函數(shù)是奢談，下面就讓我們深入探討幾個(gè)箭頭函數(shù)不能解決的情況吧。

對(duì)象原型

先看JavaScript代碼片段：

classRobot { 
       constructor(name,catchPhrase) { 
         this.name= name; 
         this.catchPhrase= catchPhrase; 
       } 
     }; 
     Robot.prototype.speak= () => { 
       console.log(this === window); 
       return this.catchPhrase 
     }; 
     const ironG =newRobot("Iron Giant", "Be good"); 
     ironG.speak(); 

第15行的函數(shù)調(diào)用如下：

true 
undefined 

定義了speak() 原型函數(shù)，并為新Robot對(duì)象傳遞了口號(hào)，那為什么這段代碼的計(jì)算結(jié)果是未定義的呢?

console.log()揭示了原因。如你所見，當(dāng)要求控制臺(tái)判斷(this === window)時(shí)，它返回true。這為上文對(duì)象方法示例中討論的內(nèi)容提供了依據(jù)。

當(dāng)使用需要上下文的函數(shù)時(shí)，必須使用常規(guī)函數(shù)語法，以便使this正確綁定：

Robot.prototype.speak=function() { 
                      console.log(this === ironG); // true 
                      return this.catchphrase; 
                    }; 

對(duì)象方法

假設(shè)想要?jiǎng)?chuàng)建一個(gè)綁定到對(duì)象的方法。

const mario = { 
         lives: 3, 
         oneUp: () => { 
             this.lives++; 
         } 
     } 

這個(gè)例子中，如調(diào)用mario.oneUp()，mario.lives的值應(yīng)該從3增加到4。然而，按照目前所寫的代碼，無論調(diào)用多少次oneUp()， lives的值都將保持不變。

為什么?正是因?yàn)閠his!

正如MDN所述:箭頭函數(shù)自身沒有this。使用了封閉詞法范圍的this值;箭頭函數(shù)遵循正常的變量查找規(guī)則。因此，當(dāng)搜索當(dāng)前作用域中不存在的this時(shí)，箭頭函數(shù)最終會(huì)從其封閉作用域中找到this。

例子中，封閉的范圍是window對(duì)象。調(diào)用oneUp()會(huì)要求程序增加window對(duì)象中l(wèi)ives的值。這樣的值不存在，所以代碼不起作用。

相反，應(yīng)該使用傳統(tǒng)的函數(shù)語法，它將函數(shù)的this綁定到調(diào)用該函數(shù)的特定對(duì)象上：

const mario = { 
       lives: 3, 
       oneUp: function() { 
         this.lives++; 
       } 
     }; 

動(dòng)態(tài)上下文

最后一個(gè)例子：

const button = document.querySelector(#darkMode); 
                                button.addEventListener('click', () => { 
                                  this.classList.toggle('on'); 
                                }); 

到目前為止，你可能已經(jīng)意識(shí)到這個(gè)代碼無效及其原因。沒錯(cuò)，這又和this有關(guān)。

箭頭函數(shù)語法在函數(shù)聲明時(shí)靜態(tài)地綁定上下文，這與使用事件處理程序或事件監(jiān)聽器時(shí)試圖實(shí)現(xiàn)的相反，它們本質(zhì)上是動(dòng)態(tài)的。

當(dāng)通過事件處理程序或監(jiān)聽器操作DOM時(shí)，觸發(fā)的事件指向?qū)儆谀繕?biāo)元素的this。

對(duì)于全局執(zhí)行上下文中定義的箭頭函數(shù)，this將指向window。因此，上面的代碼中，this.classList將被認(rèn)為是window.classList，從而導(dǎo)致TypeError。

從這幾個(gè)簡(jiǎn)單的例子中可以發(fā)現(xiàn)，JavaScript中關(guān)于this的內(nèi)容值得研究，這也許會(huì)加深你對(duì)何時(shí)使用或不使用箭頭函數(shù)的理解。