uniapp中this有时打印的是undefined(作用域问题)

this关键字是指当前组件的实例,使用this可以直接访问当前组件中的属性和方法。
比如,在组件的methods中,通过this可以访问组件的data对象,如下所示:

javascript 复制代码
export default {
    data() {
        return {
            message: 'Hello World'
        }
    },
    methods: {
        showMessage() {
            console.log(this.message);
        }
    }
}

that是一个临时对象,用于在函数内部保存this的值。

在一些情况下,函数内部的this并不是指向当前组件的实例,此时可以使用that来保存this的值,以便在函数内部继续使用。
比如,在使用uni.request向服务器发起请求时,由于this的指向已经改变,此时需要使用that来保存当前组件的实例,示例如下:

javascript 复制代码
export default {
    data() {
        return {
            items: []
        }
    },
    methods: {
        loadData() {
            //第一种解决方案,that 保存当前组件的实例          
            let that = this;
            uni.request({
                url: '*******',
//该success方法指向闭包,所以this属于闭包,由此在success回调函数里是不能直接使用this.items的
                success(res) {
                    //在此处使用that来访问items属性,而不是this
                    that.items = res.data;
                }

            })
        },
        loadData() {
            //第二种解决方案,使用箭头函数      
            uni.request({
                url: '*******',
//箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的
                success:(res)=>{
                    this.items = res.data;
                }

            })
        }
    }
}
相关推荐
MY_TEUCK2 小时前
【AI开发】从0到1写一个uni-app Vue3 小程序开发的Skill:用法、流程与踩坑复盘
人工智能·uni-app
雪芽蓝域zzs3 小时前
uni-app x uts类转换
uni-app
游戏开发爱好者84 小时前
深入理解iOSTime Profiler:提升iOS应用性能的关键工具
android·ios·小程序·https·uni-app·iphone·webview
gskyi4 小时前
UniApp Vue3 数据透传终极指南
javascript·vue.js·uni-app
gskyi4 小时前
uni-app 高阶实战:onLoad与getCurrentPages深度技巧
前端·javascript·vue.js·uni-app
阿奇__20 小时前
uniapp支付宝 H5 开发踩坑,hash模式下取参要规范!
开发语言·uni-app
云起SAAS1 天前
小智笔记APP源码 | 8大广告联盟聚合(穿山甲/优量汇/快手/百度) | 应用市场过审极速版 | uni-app全栈商用项目
笔记·uni-app·广告联盟·笔记app
蹦哒1 天前
UniApp 原生插件开发完整指南
uni-app
a_Ichuan1 天前
在HBuilderX创建的uniapp项目中使用unocss
前端·uni-app
web前端神器1 天前
记录uniapp小程序的报错
小程序·uni-app·apache