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

栏目: JavaScript · 发布时间: 5年前

内容简介::star:️ 更多前端技术和知识点,搜索订阅号箭头函数虽然因语法简练受人追捧。但由于没有 this 会导致在一些情况下出现预想不到的意外情况。:hushed:

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

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

:star:️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅

避免在定义对象方法时使用

箭头函数虽然因语法简练受人追捧。但由于没有 this 会导致在一些情况下出现预想不到的意外情况。:hushed:

比如在对象中定义一个方法:

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

看起来很完美调用这个方法能够按照预期,获得对象的 food 属性

但如果将其改为箭头函数:

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

由于箭头函数自身没有 this 会导致自动继承外层的 this 导致打印出的变量出错,这个 bug 有点 :fried_shrimp:

因此不要在对象方法中使用箭头函数

避免在 prototype 上使用

因为没有 this 导致 this 指向错误,所以在定义 prototype 方法上一定记得不要使用箭头函数

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

避免在需要 arguments 上使用

因为箭头函数没有 arguments 因此如果外层是另外一个函数,那么 arguments 是这个外层函数的

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

当然可以使用 rest 操作符获取对应的参数

避免在动态上下文中的回调函数里使用

如果你需要你的上下文是可变的,动态的,那么不要使用箭头函数

比如在一个页面中,我们需要为每一个 p 元素增加一个事件处理函数,那么:

document.querySelectorAll('p').forEach(elem => {
    elem.addEventListener('click', () => {
        console.log(this.innerText.length) // :x: 这个时候 this 指向 window,因此会报错
    })
})

改为普通函数才可以正确访问到预期的 this:

document.querySelectorAll('p').forEach(elem => {
    elem.addEventListener('click', function() {
        console.log(this.innerText.length) // :white_check_mark: 这个时候 this 指向 elem
    })
})

避免在需要 caller 的时候使用

因 caller 早已不再是推荐的标准,应该在任何时候都避免使用 caller 这里就不多说了 :u7981:️

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

其他情况下尤其是 map reduce forEach 等并没有什么复杂的逻辑的时候使用箭头函数能够增加阅读体验,想必是极好的 :clap:

that's all

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

请关注我的订阅号,不定期推送有关 JS 的技术文章,只谈技术不谈八卦 :blush:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

认知与设计

认知与设计

Jeff Johnson / 张一宁 / 人民邮电出版社 / 2011-9-1 / 59.00元

本书语言清晰明了,将设计准则与其核心的认知学和感知科学高度统一起来,使得设计准则更容易地在具体环境中得到应用。涵盖了交互计算机系统设计的方方面面,为交互系统设计提供了支持工程方法。不仅如此,这也是一本人类行为原理的入门书。一起来看看 《认知与设计》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具