JS的箭头函数与this

前言

在学习Angular的时候，我需要写一个发起请求的回调函数，来返回success或者error，当我按照教程写了两个方法的时候，编译器却给我报了这样一个错误，

non-arrow functions are forbidden大概意思就是禁止使用非箭头函数，只有箭头函数可以使用。我们看到他下面当然还有快速解决办法，不管三七二十一，先用shirt+Alt+Enter。我们知道，对于我这个小白来说，这样一个万能改错帮我轻松解决了很多麻烦，然后他加入了一行注释，他就正常了。

为什么加了一行注释就好了呢，注释不是给程序员看的吗，编译器不是不编译注释吗？
我们再回头看看刚才我们shirt+Alt+Enter旁边的蓝字

Suppress 'only-arrow-functions' for current line字面意思就是禁止当前行的“仅箭头函数”。我们再来看看我们加的注释disable-next-line:only-arrow-functions大概意思是禁用下一行，仅箭头功能。

解决

问了学长以后，大概就是编译器认为我用两个function可能会产生冲突，所以应该是一个function一个箭头函数，或者两个箭头函数。那么问题来了，为什么会产生冲突呢？

箭头函数与this

箭头函数是js的一种特殊函数，箭头函数相当于匿名函数，并且简化了函数的定义。但是箭头函数中的this与常规函数表示不同。我们以下面的例子来看看二者的区别。

let obj = {
  a: () => {
    console.log(this);
  },
  b: function() {
    console.log(this);
  }
}
obj.a();
obj.b();

控制台里执行是这样的

我们看到，普通方法里的this返回了obj对象，而箭头函数里的this返回了window，因为箭头函数默认不会使用自己的this，而是和外层的this保持一致，最外层的this就是window对象。箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的。

思考

我们再回到我们最初的问题，为什么编译器认为我可能会产生冲突呢？
我们先把原来的注释去掉，然后改成箭头函数，

果然，他不报错了，，
而后面的教程里也是要求我们改成箭头函数，我们用function在页面输出不出来teacher对象，

但是改成箭头函数后就可以成功输出，

可能编译器早就预料到我应该用箭头函数，所以特意来提醒我一下吧。上面的success方法里确实用到了this.teachers,this代指success，我们知道方法也可以看成一个对象，而success没有teachers，所以这里确实使用错了，但是为什么会在error方法报错呢，难道这里的报错指的是上面的错误吗？
我们用function的时候，this指的是success，而用箭头函数的时候，this指的是我们定义的类AppComonent。
箭头函数下我们再来打印一下this来验证。

的确如此。
分享一篇对我写这篇文章帮助很大的博客，里面详细讲了箭头函数的用法和this的不同，感谢博主的分享。
JS中的箭头函数与this