本文共 1127 字，大约阅读时间需要 3 分钟。

1、引言

最近，学Vue相关知识时，学到了axios，发现axios请求之后的回调函数里this并不指向当前vue实例，在浏览器按F12报了错，赶紧想着去解决问题，后面才知道原来还有箭头函数这个简便操作，一起来了解一下把~

2、简单介绍

关于它们两个的比较，我就以请求一个随机获取笑话的api为例了，来说明它们的区别，主要界面如图：

接口：随机获取一条笑话请求地址：https://autumnfish.cn/api/joke请求方法：get方法请求参数：无响应内容:随机一条笑话

3、普通函数

			
   						
   						
   
			
    			
    
{
   {
   joke}}
		
   
			

• 从以上结果来看，在methods下的函数this指向的是当前创建的vue实例，而在这些函数内部使用例如axios与后台交互后回调函数的内部的this并非指向当前的vue实例，若想拿到后台回传的数据更新data里的数据，不能在回调函数中直接使用this，要用外部函数定义的变量存储的this，也就是当前vue的实例。
• 这里我就定义了一个that变量来存储this，然后在xios中的回调函数通过that来更新joke属性值

4、箭头函数 =>

			
   						
   						
   
			
    			
    
{
   {
   joke}}
		
   
			

• 从以上结果来看， 箭头函数相当于匿名函数，并且简化了函数定义。它看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。此时this在箭头函数中已经按照词法作用域绑定了。
• 故上述代码里，我们就不像普通函数那样还要定义一个变量来存储，直接在回调函数里面使用this就好了，是不是方便很多了呢

5、实例演示

后续考虑，只看一个小项目还是不太明白，这里我就演示一下两种函数在控制台打印的结果

测试代码如下：

console(this.joke)

第一种，普通函数

6、结束语

读者可以对这两个函数的源码进行测试，直接跑就行，看一下源码区别应该就能理解它们的区别了。当然，ES6语法还有很多，这只是一小部分，还要继续学习下去，希望本篇博客对你有所帮助！

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

学如逆水行舟，不进则退

转载地址：https://chocolate.blog.csdn.net/article/details/103969483 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！