2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=> 对this作用域的理解 【整理】

文章目录

1、引言 2、简单介绍 3、普通函数 4、箭头函数 => 5、实例演示 6、结束语 点击进入Vue❤学习专栏~

1、引言

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

2、简单介绍

关于它们两个的比较,我就以请求一个随机获取笑话的api为例了,来说明它们的区别,主要界面如图:
2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=> 对this作用域的理解 【整理】
接口描述如下:

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

3、普通函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 开发环境版本,包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div >
			<input type="button" value="查看一个笑话" @click="getJoke" />
			<p>{{joke}}</p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					joke: "笑话"
				},
				methods:{
					getJoke:function(){
						var that=this;
						axios.get("https://autumnfish.cn/api/joke").then(function(response){
							console.log(response.data);
							that.joke=response.data;
						},function(err){
							console.log(err)
						})
					}
				}
			});
		</script>
	</body>
</html>
从以上结果来看,在methods下的函数this指向的是当前创建的vue实例,而在这些函数内部使用例如axios与后台交互后回调函数的内部的this并非指向当前的vue实例,若想拿到后台回传的数据更新data里的数据,不能在回调函数中直接使用this,要用外部函数定义的变量存储的this,也就是当前vue的实例。 这里我就定义了一个that变量来存储this,然后在xios中的回调函数通过that来更新joke属性值

4、箭头函数 =>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 开发环境版本,包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div >
			<input type="button" value="查看一个笑话" @click="getJoke" />
			<p>{{joke}}</p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					joke: "笑话"
				},
				methods:{
					getJoke:function(){
						axios.get("https://autumnfish.cn/api/joke").then((res) =>{
							console.log(res);
							this.joke=res.data;
						},(err)=>{
							console.log(err)
						})
					}
				}
			});
		</script>
	</body>
</html>
从以上结果来看, 箭头函数相当于匿名函数,并且简化了函数定义。它看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。此时this在箭头函数中已经按照词法作用域绑定了。 故上述代码里,我们就不像普通函数那样还要定义一个变量来存储,直接在回调函数里面使用this就好了,是不是方便很多了呢

5、实例演示

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

测试代码如下:

console(this.joke)

第一种,普通函数
2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=&gt; 对this作用域的理解 【整理】
第二种,箭头函数
2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=&gt; 对this作用域的理解 【整理】
这样应该就展示的比较清楚了,我们使用了箭头函数后,this还是那个this,而普通函数this就不是那个this了

6、结束语

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


最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=&gt; 对this作用域的理解 【整理】

点击进入Vue❤学习专栏~

学如逆水行舟,不进则退
栏目