当前位置：首页 > news >正文

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

news 2025/7/6 13:28:19

在这里插入图片描述
😉博主：初映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语法中时刻需要注意的。