JavaScript普通函数与箭头函数有怎样的区别?

本文对比了JavaScript中的普通函数与箭头函数,包括它们在this指向、构造函数、arguments对象、prototype原型以及call/apply/bind方法等方面的差异。箭头函数没有自己的this,不会创建自己的 prototype,并且无法通过call()、apply()、bind()改变this指向。此外,文章还提及了前端工程师的成长路径和30天挑战学习计划,帮助开发者深入学习JavaScript。
摘要由CSDN通过智能技术生成

比较点

普通函数

箭头函数

具体案例

简写

/

箭头函数如果没有参数,同时函数体的返回值只有一句,则{}和return都可以省略。

1、函数简写

this指向

this总是指向调用它的对象,如果作为构造函数,它指向创建的对象实例

箭头函数的this指向的是父级作用域的this,是通过查找作用域链来确定 this 的值,也就是说看的是上下文的this,指向的是定义它的对象,而不是使用时所在的对象。

2、this指向

this改变

call()、apply()、bind()等方法能改函数中this的指向

call()、apply()、bind()等方法不能改变箭头函数中this的指向

3、改变this指向

构造函数

可以作为构造函数,用来创建对象实例

箭头函数不能作为构造函数使用

4、构造函数

arguments对象

每一个普通函数调用后都具有一个arguments对象,用来存储实际传递的参数。

箭头函数没有自己的arguments,取而代之用rest(剩余)参数...arg来解决

5、arguments与...args

prototype原型

具有prototype

没有prototype原型

6、prototype原型

1、箭头函数简写:

  • 箭头函数如果没有参数,同时函数体的返回值只有一句,则{}和return都可以省略
var fn = () => console.log("123");//去掉了{} 和 return
fn(); //'123'

2、this指向:

  • 普通函数中this指向的是调用它的对象,如果作为构造函数,它指向创建的对象实例
  • 箭头函数不会创建自己的this, 所以它没有自己的t
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艾编程前端技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值