几种应当防止运用箭头函数的状况

⭐️ 更多前端手艺和知识点，搜刮定阅号
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 的手艺文章，只谈手艺不谈八卦 😊