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