幾種應該避免使用箭頭函數的狀況

幾種應該避免使用箭頭函數的狀況

⭐️ 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

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

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

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

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

但若是將其改成箭頭函數：

因爲箭頭函數自身沒有 this 會致使自動繼承外層的 this 致使打印出的變量出錯，這個 bug 有點 🍤

所以不要在對象方法中使用箭頭函數

避免在 prototype 上使用

由於沒有 this 致使 this 指向錯誤，因此在定義 prototype 方法上必定記得不要使用箭頭函數

避免在須要 arguments 上使用

由於箭頭函數沒有 arguments 所以若是外層是另一個函數，那麼 arguments 是這個外層函數的

固然可使用 rest 操做符獲取對應的參數

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

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

好比在一個頁面中，咱們須要爲每個 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
    })
})

避免在須要 caller 的時候使用

因 caller 早已再也不是推薦的標準，應該在任什麼時候候都避免使用 caller 這裏就很少說了 🈲️

其餘狀況下尤爲是 map reduce forEach 等並無什麼複雜的邏輯的時候使用箭頭函數可以增長閱讀體驗，想必是極好的 👏

that's all

請關注個人訂閱號，不按期推送有關 JS 的技術文章，只談技術不談八卦 😊