一次性理解箭头函数

659 阅读2分钟

「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

这几天被箭头函数快搞到郁闷了...今天给他一次性铲除!

image.png

首先!箭头函数和普通函数有什么区别?

答:“箭头函数没有自己this,它还不能作为构造函数。”

漂亮!没有毛病,那你说说,箭头函数为什么不能作为构造函数呢?

好的,进入正题了!

箭头函数

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

并且从MDN的文档中可以看到:

  • 没有单独的this
  • 不绑定arguments
  • 箭头函数不能用作构造器,和 new一起用会抛出错误
  • 箭头函数没有prototype属性 这些都是和普通函数的区别,通过一个简单的打印结果可以看出:

image.png

附上一张原型链图解

image.png

这样一来,你可以发现:箭头函数与构造函数相比,缺少了很多东西,比如:caller,arguments,prototype,但同时也可以看到,箭头函数是有__proto__属性的,所以箭头函数本身是存在原型链的,他也是有自己的构造函数的,但是原型链到箭头函数这一环就停止了,因为它自己没有prototype属性,没法让他的实例的__proto__属性指向,所以箭头函数也就无法作为构造函数。同时我们可以看到,由于箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数,不能绑定this,所以call()和apply()的第一个参数会被忽略。

image.png

所以,问你它能不能作为构造函数,其实算是变相说prototype,那当然就是不能!

差点忘记 new 了

image.png

关于new的话,可以参考一下这里:简单说:JS类、new、prototype与__proto__

然后你就会发现,如果它可以和new一起用,是个多难以置信的事情!