【uniapp】this有时为啥打印的是undefined?（箭头函数修改this）

最新推荐文章于 2023-12-12 17:53:50 发布

初映CY的前说

最新推荐文章于 2023-12-12 17:53:50 发布

阅读量1.9k

点赞数 2

文章标签： uni-app

本文链接：https://blog.csdn.net/m0_61118311/article/details/132533592

版权

在这里插入图片描述
😉博主：初映CY的前说(前端领域) ,📒本文核心：uniapp中this指向问题

前言：this大家知道是我们当前项目的实例，我们可以在这个this上面拿到我们原型上的全部数据。这个常用在我们在方法中调用其他方法使用。

⭐一、uniapp中this指向
简而言之，记住一句话：箭头函数可以修改this指向
下面来看这个例子，我是用uni官网的api举个例子uni.getSystemInfo


```javascript
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
		 getInfo(){
		uni.getSystemInfo({
			fail: function (res) {
				console.log(res,this)
			},	
			success: (res) => {
				console.log(this,'this');
			}
		});
		 }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

注意点：我调用方法中成功success使用的是箭头函数，此刻我们可以看到我们的this是什么
在这里插入图片描述
展开就是我们当前实例

那我们用传统的非箭头试试看：
代码修改如下：

日志输出查看，我们的this找不到了

总结：使用uniapp中api的时候一定是需要使用箭头函数的呦，同理这是使用vue语法中时刻需要注意的。