面试官——什么时候不能使用箭头函数？

,箭头函数是和我们工作密切相关的东西；可以说箭头函数的诞生，给我们的工作带来了极大的便利。但是箭头函数有什么缺点？什么时候不能使用箭头函数？ 这你了解吗?,我们觉得箭头函数很高级，可以规避 this 的问题，所有的场景下都是用箭头函数。在不能使用的场景下使用了，出现了问题，你还不知道是什么问题，那这不是瞎添乱吗！是不是！,这里给大家先提出一个问题：,大家觉得会输出什么呢？,先悄悄思考一下！,3,2,1 公布答案!,,如果答错了，也别灰心，毕竟网络有着35的延迟，影响着你的操作和思考，看完这篇文章，保证你就不会答错了！,,箭头函数的this就是他父容器的this，不是在执行的时候确定的，而是在定义的时候确定的。,,如上图，我们可以发现，箭头函数的两次执行的 this 都是指向了 Windows，使用call并没有发生改变，而普通函数第一次是指向了Windows，第二次则是变成了我们传入的。,我们在对象中定义了普通函数：getName和箭头函数 getName1，接下来我们来调用一下：,这里给大家默想3s输出什么？,公布答案：,,我们发现箭头函数好像并没有获取到值诶！,为什么对象方法中，箭头函数的this指向不是这个对象？,obj.getName()中this指向函数的调用者，也就是obj实例，因此this.name = "张三"。,getName1()通过箭头函数定义，而箭头函数是没有自己的this，会继承父作用域的this。,因此obj.getName1()执行时，此时的作用域指向window，而window没有定义age属性，所有报空。,从例子可以得出：对象中定义的函数使用箭头函数是不合适的。,我们又又又在对象中定义了普通函数：getName和箭头函数 getName1，接下来我们来调用一下：,这里再再再给大家默想3s输出什么？,bang bang bang 公布答案：,,为什么？,出现问题的原因是this指向window对象，这和使用箭头函数在对象中定义方法十分类似。,我们又又又定义了普通的构造函数：Foo和箭头函数 Foo1，接下来我们来调用一下：,不仅不行，还报错了呢！,,为什么？,比如，我们需要给一个按钮添加点击事件：,如果我们在回调中不需要使用到 this，那就啥问题也没有，但是！使用到了 this，那么问题就大大的了！,箭头函数的 this 指向的是他的父作用域（这里就指向了 window），而不是指向这个button。这时候我们需要使用普通函数才可以。,,为什么不行呢？,Vue 本质上是一个对象，我们说过对象方法中，不适用箭头函数。他的本质上的和对象方法中，不适用箭头函数是一样的。,那么我有一个问题：Vue不行，作为大热框架之一的 react 行吗？,回答是：react 行。,因为 Vue组件本质上是一个 JS 对象；React 组件（非Hooks）他本质上是一个 ES6 的 class。,不信的话我们测试一下就知道了。,