箭头函数转化为普通函数_理解普通函数和箭头函数的区别点

普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用普通函数。

普通函数大家知道:

形式基本一致

12c1cf0003ab2c2ec3f9eaeab8af4c60.png

来看看箭头函数

开发时根据实际情况可以省略一些东西

单条处理可以省略return和{大括号}

单个参数可以省略(小括号)

d23b3e4effaa47f06aa3cdae9c93c790.png

箭头函数不能作为构造函数 不能new。会报错

3be78b272dac2144f2fe65c95e0c9db8.png

2358a0c337ef71ef4424bd83865915f1.png

箭头函数不绑定arguments,但是可使用...rest参数

这是普通函数arguments,可以使用

5de5b0806cf78e849331749a62917adf.png

a7897a5ffc6320539d5199662cadb324.png

这是箭头函数的,用了会报错。

c77c218c5ffc0230e91f19f46f962602.png

d91f72ee057fdf00ec76345fe75d6b0e.png

但是可以这么用,不过结果和arguments有所不同。

fb8509dbac4f455dc0fa11adbd5b42e5.png

c7806e046f48b3cb1de0bb031d9db7d7.png

arguments的一般使用场景是:允许传入3个参数,中间一个参数是可选。如果只传1个参就是参数1用,传入2个参就是参数1和参数3用...

f0a7d2c4e5b1358393e7bccc7f49c9ae.png

rest参数使用效果:

rest默认是[],多余的传参会加入数组

bc42e5a356dfbfc6f983cc0aed2fc0c0.png

这里我们使用arguments来模拟rest效果看看:

00541975f0bb1d4d45ed19f8570222aa.png

2种函数的this代表不一样:

f1是箭头函数,this代表上层对象,若无自定义上层,则代表window。

f2是普通函数,this代表当前对象。

a91b38d65b88485bc3e2a8588ca747ba.png

b1461255516bc800cf2677d0afdeb366.png

箭头函数的call()或apply()函数,不会影响到this的代表对象:

b,c,d均是普通函数,

b中的f是箭头函数,所以内部的this代表上层obj,值为11

c中的f是箭头函数,调用f的call()时不会影响内部的this,依然代表obj,值为11

d中的f是普通函数,this代表window,但是因为调用了f的call(m)变成了m,值为21

26267a2cc34ea1175ac7e7aa7241f39e.png

这里我们来提一下call函数:

call函数是每个函数都有的方法,用于改变普通函数内部的this指向的。

77cc29abca2597e491e12b0f1d5dd1eb.png

箭头函数没有原型属性:

prototype是普通函数用于获取原型对象的。

1dc64588a9ede3be533b9e6743a1d8b9.png

总结:

箭头函数内的this指向上层对象,bind()、call()、apply()均无法改变指向。

普通函数内的this执行调用其函数的对象。

e825b3a2f17b43d40a917c250bb19a81.png

b2ab7901707a1f90ba7f025ebabfb0bd.png

ac7a129bd5fdc9337e6e7911e861365a.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值