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;
                }

            })
        }
    }
}
相关推荐
码兄科技14 小时前
24小时自助健身房系统软件开发实战指南:功能设计与部署方案
java·spring boot·uni-app
2501_9160074715 小时前
苹果商店iOS应用上架费用全面解析:开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088917 小时前
如何实现iOS App代码混淆:SwiftShield使用指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088919 小时前
怎么用 Godot 导出 iOS 应用并上架 App Store?签名字段该填什么?
android·ios·小程序·https·uni-app·iphone·webview
郑州光合科技余经理1 天前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
白远山2 天前
城市电竞陪玩调度系统实战:从派单算法到多端协同的架构拆解
java·架构·uni-app·需求分析
白远山3 天前
上海24小时自助健身房系统软件开发实战指南
java·架构·uni-app·需求分析
白远山4 天前
上海24小时自助健身房系统软件开发实战指南:从需求到部署
java·架构·uni-app·需求分析
海鸥两三4 天前
小程序文档预览 · 进阶面试题
小程序·uni-app·uniapp
海鸥两三4 天前
微信小程序 PDF 预览实践(uni.downloadFile → uni.openDocument)
小程序·uni-app