箭头函数箭头函数与我们的工作息息相关；可以说箭头函数的诞生给我们的工作带来了极大的便利。但是箭头函数有什么缺点呢？什么时候不能使用箭头函数？你懂吗？我们认为箭头函数很高级，可以避免这个问题。所有场景都会用到箭头函数。用在不能用的场景，出了问题，你又不知道是什么问题，那不就是添乱吗！是还是不是！这里给大家出一道题：constobj={name:'张三',getName(){returnthis.name},getName1:()=>{returnthis.name}}obj.__proto__.getName2=function(){returnthis.name}obj.__proto__.getName3=()=>{returnthis.name}console.log('普通函数',obj.getName())console.log('普通函数',obj.getName2())console.log('arrowfunction',obj.getName1())console.log('arrowfunction',obj.getName3())你认为会输出什么？先静静想想！3,2,1公布答案！如果您得到错误的答案，请不要气馁。毕竟网络有35%的延迟，影响你的操作和思维。看完这篇文章，保证你不会看错！箭头函数的缺点是什么？没有参数，如果你想使用它，你可以使用rest参数代替。这里我们定义了一个箭头函数和一个普通函数以及一个带有剩余参数的箭头函数：constfn1=()=>{console.log('arguments',arguments)}fn1(100,200)functionfn2(){console.log('arguments',arguments)}fn2(100,200)constfn3=(...values)=>{console.log('values',values)}fn3(100,200)不能通过apply,call,bindchangethepointofthis这里我们定义了一个箭头函数和一个普通函数。constfn3=()=>{console.log('this',this)}fn3()functionfn4(){console.log('this',this)}fn4()箭头函数的this是他的parentcontainerthis不是在执行的时候确定的，而是在定义的时候确定的。如上图所示，我们可以发现箭头函数的两次执行的this指向Windows，call的使用没有变化，而普通函数第一次指向Windows，第二次指向Windows它成为我们传入的。什么时候不能使用箭头函数？1.在对象方法中，在对象Ordinary中定义了箭头函数constobj={name:'张三',getName(){returnthis.name},getName1:()=>{returnthis.name}}function:getName和箭头函数getName1，我们接下来调用它：console.log('普通函数',obj.getName())console.log('箭头函数',obj.getName1())你想输出什么3秒？公布答案：我们发现箭头函数好像没有取到值！为什么在对象方法中，箭头函数的this不指向this对象？this总是指向函数的调用者在箭头函数中，this指向定义它的对象，而不是使用它的对象。也就是说，箭头函数本身并没有this，而是从父作用域继承了this。在obj.getName()中，this指向函数的调用者，即obj实例，所以this.name="张三"。getName1()是通过箭头函数定义的，箭头函数没有自己的this，会继承父作用域的this。所以执行obj.getName1()时，此时的scope指向window，但是window没有定义age属性，所有的reports都是空的。从例子中可以看出，对象中定义的函数使用箭头函数是不合适的。2、在原型方法中，箭头函数constobj={name:'张三',}obj.__proto__.getName=function(){returnthis.name}obj.__proto__.getName1=()=>{returnthis.name}我们又在对象中定义了普通函数：getName和箭头函数getName1，然后我们又在这里调用了：console.log(obj.getName())console.log(obj.getName1())然后我再沉思一下3s输出是什么？bangbangbang揭晓答案：为什么？出现问题的原因是this指向的是window对象，这很类似于在对象中使用箭头函数定义方法。3.构造函数也不行！我们已经定义了普通构造函数：Foo和箭头函数Foo1，然后我们调用它：functionFoo(name,sex){this.name=namethis.sex=sex}constFoo1=(name,sex)=>{this.name=namethis.sex=sex}console.log('普通构造函数：',newFoo('张三','男'))console.log('箭头函数：',newFoo1('张三','male'))不仅失败，还报错！为什么？构造函数通过new关键字生成对象实例，生成对象实例的过程也是通过构造函数将this绑定到实例的过程，而箭头函数是没有自己的this的。因此，箭头不能作为构造函数，也不能通过new运算符调用箭头函数。4.动态上下文回调函数比如我们需要给一个按钮添加点击事件：constbtn1=document.getElementById('btn1')btn1.addEventListener('click',()=>{this.innerHTML='clicked'})如果我们不需要在回调中使用这个，那么就没有问题，但是！如果用这个，那问题就大了！为什么？箭头函数的this指向它的父作用域（这里指向window），而不是按钮。这时候我们就需要用到普通的函数了。5、Vue生命周期和方法中不能使用箭头函数，为什么？Vue本质上是一个对象。我们说过箭头函数不适用于对象方法。本质上和对象方法中是一样的，箭头函数不适用。所以我有一个疑问：Vue不会做，可以react，最火的框架之一，做吗？答案是：反应线。因为Vue组件本质上是一个JS对象；React组件（不是Hooks）本质上是一个ES6类。如果你不相信我，让我们测试一下。classMan{constructor(name,city){this.name=namethis.city=city}getName=()=>{returnthis.name}}constf=newMan('李四','上海')console.log(f.getName())对熟练使用箭头函数很重要，对函数this(key)也要敏感。Vue组件本质上是一个JS对象；React组件（不是Hooks）本质上是一个ES6类，两者是不同的。
