5種應該避免使用箭頭函數的情況

2019 年 12 月 30 日
筆記

摘要： 箭頭函數也有可能會有BUG…

原文：幾種應該避免使用箭頭函數的情況
作者：JS菌

Fundebug經授權轉載，版權歸原作者所有。

1. 避免在定義對象方法時使用

箭頭函數雖然因語法簡練受人追捧。但由於沒有 this 會導致在一些情況下出現預想不到的意外情況。

比如在對象中定義一個方法：

this.food = "banana";    let obj = {      food: "strawberry",      log() {          console.log(this.food);      }  };    obj.log(); // 打印"strawberry"

看起來很完美調用這個方法能夠按照預期，獲得對象的 food 屬性

但如果將其改為箭頭函數：

this.food = "banana";    let obj = {      food: "strawberry",      log: () => {          console.log(this.food);      }  };    obj.log(); // 打印"banana"

由於箭頭函數自身沒有 this 會導致自動繼承外層的 this 導致打印出的變量出錯，這個 bug 有點坑。。

因此不要在對象方法中使用箭頭函數。

2. 避免在 prototype 上使用

因為沒有 this 導致 this 指向錯誤，所以在定義 prototype 方法上一定記得不要使用箭頭函數

this.name = "oli"; // this 從外層基礎    function Person(name) {      this.name = name;  }    Person.prototype.log = () => {      console.log(this.name);  };    let p = new Person();    p.log(); // 打印"oli"

3. 避免在需要 arguments 上使用

因為箭頭函數沒有 arguments 因此如果外層是另外一個函數，那麼 arguments 是這個外層函數的

function foo() {      return (...argv) => {          console.log(...arguments); // 打印[1, 2, 3]，箭頭函數並沒有arguments需要從外部函數獲取          console.log(...argv); // 打印[1, 2, 3, 4]      };  }    foo([1, 2, 3])([1, 2, 3, 4]);

當然可以使用 rest 操作符獲取對應的參數

4. 避免在動態上下文中的回調函數里使用

如果你需要你的上下文是可變的，動態的，那麼不要使用箭頭函數

比如在一個頁面中，我們需要為每一個 p 元素增加一個事件處理函數，那麼：

document.querySelectorAll('p').forEach(elem => {      elem.addEventListener('click', () => {          console.log(this.innerText.length) // 這個時候 this 指向 window，因此會報錯      })  })

改為普通函數才可以正確訪問到預期的 this：

document.querySelectorAll('p').forEach(elem => {      elem.addEventListener('click', function() {          console.log(this.innerText.length) // 這個時候 this 指向 elem      })  })

5. 避免在需要 caller 的時候使用

因 caller 早已不再是推薦的標準，應該在任何時候都避免使用 caller 這裡就不多說了

其他情況下尤其是 map reduce forEach 等並沒有什麼複雜的邏輯的時候使用箭頭函數能夠增加閱讀體驗，想必是極好的。

版權聲明

轉載時請註明作者 Fundebug以及本文地址： https://blog.fundebug.com/2019/05/07/5-cases-not-use-arrow-function/

您的用戶遇到BUG了嗎？

體驗Demo 免費使用