几种应该避免使用箭头函数的状况

几种应该避免使用箭头函数的状况

⭐️ 更多前端技术和知识点，搜索订阅号 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 的技术文章，只谈技术不谈八卦 😊