当前位置:首页 >> 技术栈专业化分层 >> 【uniapp】this有时为啥打印的是undefined-(箭头函数修改this),绿坝-花季护航

【uniapp】this有时为啥打印的是undefined-(箭头函数修改this),绿坝-花季护航

cpugpu芯片开发光刻机 技术栈专业化分层 3
文件名:【uniapp】this有时为啥打印的是undefined-(箭头函数修改this),绿坝-花季护航 【uniapp】this有时为啥打印的是undefined?(箭头函数修改this)

😉博主:初映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语法中时刻需要注意的。

至此本文结束,愿你有所收获! 期待大家的关注与支持! 你的肯定是我更新的最大动力!!!

协助本站SEO优化一下,谢谢!
关键词不能为空
同类推荐
«    2025年12月    »
1234567
891011121314
15161718192021
22232425262728
293031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接