JS中不应该使用箭头函数的四种情况详解

 更新时间:2022年07月28日 14:13:21   作者:web前端开发  
箭头函数给我们的工作带来了极大的方便,但是它们有什么缺点呢?我们应该一直使用箭头函数吗?我们应该在哪些场景中停止使用箭头函数?本文就来为大家详细讲讲

箭头函数给我们的工作带来了极大的方便,但是它们有什么缺点呢?我们应该一直使用箭头函数吗?我们应该在哪些场景中停止使用箭头函数?

现在,我们开始吧。

箭头函数的一些缺点

1、不支持参数对象

在箭头函数中,我们不能像在普通函数中那样使用 arguments 对象。

const fn1 = () => {
 console.log('arguments', arguments)
}
fn1('fatfish', 'medium')
function fn2(){
 console.log('arguments', arguments)
}
fn2('fatfish', 'medium')

可以看到,fn1箭头函数报错,但是fn2可以正常读取arguments对象。

我们如何才能在箭头函数中获取所有传递给函数的参数?

是的,没错,你可以使用Spread Operator来解决它。

const fn3 = (...values) => {
 console.log('values', values)
}
fn3('fatfish', 'medium')

2、无法通过apply、call、bind来改变this指针

我相信你可以很容易地知道下面的代码会输出什么。

const fn1 = () => {
 console.log('this-fn1', this)
}
fn1()
function fn2(){
 console.log('this-fn2', this)
}
fn2()

{
 name: 'fatfish'
}

我们希望 fn1 和 fn2 都打印对象,我们应该怎么做?

代码:

const thisObj = {
 name: 'fatfish'
}
const fn1 = () => {
 console.log('this-fn1', this)
}
fn1.call(thisObj)
function fn2(){
 console.log('this-fn2', this)
}
fn2.call(thisObj)

因为箭头函数在定义的时候就决定了它的this指向谁,所以没有办法用fn1.call(thisObj)再次改变它。

什么时候不能使用箭头功能

箭头函数不是万能的,至少有 4 种情况我们不应该使用它们。

1、请不要在构造函数中使用箭头函数

function Person (name, age) {
 this.name = name
 this.age = age
}
const Person2 = (name, sex) => {
 this.name = name
 this.sex = sex
}
console.log('Person', new Person('fatfish', 100))
console.log('Person2', new Person2('fatfish', 100))

为什么 new Person2 会抛出错误

因为构造函数通过 new 关键字生成一个对象实例。生成对象实例的过程也是通过构造函数将this绑定到实例的过程。

但是箭头函数没有自己的this,所以不能作为构造函数使用,也不能通过new操作符调用。

2、请不要在点击事件中操作this

我们经常在 click 事件中通过 this 读取元素本身。

const $body = document.body
$body.addEventListener('click', function () {
 // this and $body elements are equivalent
 this.innerHTML = 'fatfish'
})

但是如果你使用箭头函数给 DOM 元素添加回调,这将等同于全局对象窗口。

const $body = document.body
$body.addEventListener('click', () => {
 this.innerHTML = 'fatfish'
})

3、请不要在对象的方法中使用箭头函数。

const obj = {
 name: 'fatfish',
 getName () {
   return this.name
 },
 getName2: () => {
   return this.name
 }
}
console.log('getName', obj.getName())
console.log('getName2', obj.getName2())

你知道这段代码会输出什么吗?

是的,getName2方法不会打印“fatfish”,因为此时this和window是等价的,不等于obj。

4、请不要在原型链中使用箭头函数

const Person = function (name) {
 this.name = name
}
Person.prototype.showName = function () {
 console.log('showName', this, this.name)
}
Person.prototype.showName2 = () => {
 console.log('showName2', this, this.name)
}
const p1 = new Person('fatfish', 100)
p1.showName()
p1.showName2()

到此这篇关于JS中不应该使用箭头函数的四种情况详解的文章就介绍到这了,更多相关JS箭头函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解template标签用法(含vue中的用法总结)

    详解template标签用法(含vue中的用法总结)

    这篇文章主要介绍了template标签用法(含vue中的用法总结),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-01-01
  • JavaScript实现联动菜单特效

    JavaScript实现联动菜单特效

    这篇文章主要为大家详细介绍了JavaScript实现联动菜单特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript实现简单进度条效果

    JavaScript实现简单进度条效果

    这篇文章主要为大家详细介绍了JavaScript实现简单进度条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 重新理解JavaScript的六种继承方式

    重新理解JavaScript的六种继承方式

    通过本文带领大家一起重新理解JavaScript的六种继承方式,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • Ajax实现邮箱验证实例代码

    Ajax实现邮箱验证实例代码

    这篇文章介绍了Ajax实现邮箱验证的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

    JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

    这篇文章主要介绍了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法,结合实例形式分析了javascript通过针对单击onclick事件增加定时器进行onClick事件与onDblClick事件的区别判定操作,需要的朋友可以参考下
    2018-06-06
  • ESC之ESC.wsf可以实现javascript的代码压缩附使用方法

    ESC之ESC.wsf可以实现javascript的代码压缩附使用方法

    可以对javascript的大小进行压缩。使javascript的加载速度变快。
    2007-05-05
  • JS+CSS绘制棋盘格的示例代码

    JS+CSS绘制棋盘格的示例代码

    在这篇文章中,将为大家展示如何使用css Flex-box和一些JavaScript来设计棋盘。文中的示例代码讲解详细,感兴趣的可以了解一下
    2022-05-05
  • iframe的基本介绍与使用

    iframe的基本介绍与使用

    本文将给大家详细介绍一下iframe的基本介绍与使用,iframe(内嵌框架)是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签,它可以在一个页面中显示来自其他页面的内容,需要的朋友可以参考下
    2024-02-02
  • QRCode.js二维码生成并能长按识别

    QRCode.js二维码生成并能长按识别

    这篇文章主要为大家详细介绍了QRCode.js二维码生成并能长按识别,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10

最新评论