0
点赞
收藏
分享

微信扫一扫

聊聊箭头函数吧

今天是被居家隔离的第十天,好消息传来,明天可能会解封。虽然没有具体通知,但是有苗头总是好事,在这千家万户迎解封的日子,必须写一个高频问题庆祝下。

函数

回顾编程的发展历史,从最开始的面向过程,到今天的面向对象。函数一直是我们日常开发中接触最多,使用最广的技术节点之一。而近几年以react为首的框架,又开始推崇函数式编程。这无疑让函数的地位又上升了一大部分。接下来就来聊聊函数中的宠儿(箭头函数)。

箭头函数

箭头函数是ES6中新增的语法,使用箭头(=>)代替了function关键字创建函数。除了语法上的简洁,使用上也更加方便。这都源于箭头函数不需要考虑this指向,这大大降低了使用者的门槛,避免了this指向中四种绑定的规则的区分。这使箭头函数在代码的阅读性上更加清晰易懂。因此,ES6之后所有的函数都应该尽量使用箭头函数来代替。

箭头函数与普通函数的区别

至此,你们也许有人会问,这有啥可讲的,有手就行。
那先皮一下,来个简单题目试试水。具体如下:

let name = 'Yao';

const YaoShen = {
    name: 'Shen',
    getName: () => {
      console.log(this.fullName);
    }
}

YaoShen.getName();  // 猜猜打印结果

其实从上题中,大家一定能感知到,箭头和普通函数或多或少有一些区别。

首先,箭头函数最大的区别就是本身没有this。所以,它本质上是定义时外层的this。这时候上题就可想而知,箭头函数的this不是yaoshen而是全局的window。这里应该打印'Yao'。
其次,箭头函数由于没有通过构造函数Funtion创造出来,本身也不是对象,所以没有原型属性(prototype)。
再次,强绑定的中的call、apply、bind不能修改箭头函数内的this,这也从侧面印证了箭头函数的this定义时就已经确定且永远不会改变。
最后,箭头函数不能使用arguments和作为构造函数。这里则印证了第二条中的没有prototype等内容。

收获和总结

最后划下重点,箭头函数的核心知识点。\

  1. 本身函数内部没有this。且定义时就已经确定且永远不会改变。
  2. 不能通过call、apply、bind等修改指向。
  3. 不能使用arguments变量获取全部形参。

结束语

抽丝剥茧是很好的学习过程,勤能补拙是平庸到非凡的进化秘籍。就这样的阳谋,知者众多,但又有几人能践行。希望自己能成为这样勤奋好学不忘初心的人。感谢大家阅读~

A man can be destroyed but not defeated. (一个人可以被毁灭,却不能被打败。)《老人与海》

举报

相关推荐

0 条评论