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

            })
        }
    }
}
相关推荐
天蒙蒙亮4 小时前
打安卓apk包+“应用商城”发布
前端·uni-app
ModyQyW6 小时前
vite-plugin-uni-pages 0.6:统一扫描规则,开发期少重启
前端·uni-app
Software攻城狮13 小时前
【uniapp和普通web 端开发的区别】
前端·uni-app·notepad++
2501_9159214313 小时前
iOS 实时日志怎么看?KeyMob 的日志过滤、崩溃报告与符号化
android·ios·小程序·https·uni-app·iphone·webview
郑州光合科技余经理1 天前
同城小程序开发:同一笔单在用户端和商家端各显示到哪
android·java·开发语言·前端·后端·uni-app·php
普通人61 天前
uniapp模版JS
开发语言·javascript·小程序·uni-app·1024程序员节
wiseyao12191 天前
uniapp scroll-view滚动到最后
前端·javascript·uni-app
红红谈说1 天前
同一套产品两个技术栈,双版本前端工程差异怎么收敛?
前端·uni-app·vue3·前后端分离·双版本维护·接口约定
hudie7652 天前
LikeShop 二开最常改的 5 个文件(附改前改后对比)
前端·uni-app·php·个人开发
梅雅达编程笔记3 天前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈