微信小程序開發(fā)中var that =this的用法詳解
在微信小程序開發(fā)中，var that =this的聲明很常見。舉個(gè)例子，代碼如下！
示例代碼1
//index.js
Page({
data: {
toastHidden: true,
},
loadData: function () {
var that = this//這里聲明了that；將this存在that里面
wx.request({
url: 'test.php',
data: {a: 'a', b: 'b'},
header: {
'content-type': 'application/json'
},
success(res) {
that.setData({ toastHidden: false }) //這里使用了that，這樣就可以獲取Page({})對(duì)象
},
})
}
})
在代碼中第9行聲明了var that =this；第17行使用了that。
如果不聲明var that =this，且that改成this，代碼如下！
示例代碼2
//index.js
Page({
data: {
toastHidden: true,
},
loadData: function () {
wx.request({
url: 'test.php',
data: {a: 'a', b: 'b'},
header: {
'content-type': 'application/json'
},
success(res) {
this.setData({ toastHidden: false })
},
})
}
})
此時(shí)運(yùn)行代碼就會(huì)報(bào)以下錯(cuò)誤！
從報(bào)錯(cuò)中得知setData這個(gè)屬性讀不到，為何讀不到？這跟this關(guān)鍵字的作用域有關(guān)！
this作用域分析：
1.在Page({})里面，this關(guān)鍵字指代Page({})整個(gè)對(duì)象
2.因此可以通過this關(guān)鍵字訪問或者重新設(shè)置Page({})里data的變量
3.然而在loadData函數(shù)中使用了wx.request({})API這個(gè)方法導(dǎo)致在wx.request({})里沒辦法使用this來獲取Page({})對(duì)象
4.雖然在wx.request({})里沒法使用this獲取Page({})對(duì)象，但是可以在wx.request({})外面先把this存在某個(gè)變量中，所以就有了var that =this 這個(gè)聲明。此時(shí)that指代Page({})整個(gè)對(duì)象，這樣子就可以在wx.request({})里使用that訪問或者重新設(shè)置Page({})里data的變量
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)變換元素樣式的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
近幾年隨著JavaScript開發(fā)模式的逐漸成熟，CommonJS規(guī)范順勢(shì)而生，其中就包括提出了Promise規(guī)范，Promise完全改變了js異步編程的寫法，讓異步編程變得十分的易于理解2014-08-08
JavaScript?評(píng)測(cè)代碼運(yùn)行速度的案例代碼
在?JavaScript?中，可以使用?performance.now()?API?來評(píng)測(cè)代碼的運(yùn)行速度。該?API?返回當(dāng)前頁面的高精度時(shí)間戳，您可以在代碼執(zhí)行前后調(diào)用它來計(jì)算代碼執(zhí)行所需的時(shí)間，這篇文章主要介紹了JavaScript?評(píng)測(cè)代碼運(yùn)行速度,需要的朋友可以參考下2023-02-02
精通Javascript系列之?dāng)?shù)值計(jì)算
在JS中如果希望某個(gè)變量包含一個(gè)數(shù)值，那么無需限定其必須是整數(shù)或者是浮點(diǎn)數(shù)，下面來個(gè)例子2011-06-06
下面小編就為大家?guī)硪黄钔ㄋ滓锥膉avascript變量提升詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
微信小程序MUI側(cè)滑導(dǎo)航菜單示例(Popup彈出式,左側(cè)不動(dòng)，右側(cè)滑動(dòng))
這篇文章主要介紹了微信小程序MUI側(cè)滑導(dǎo)航菜單,結(jié)合實(shí)例形式分析了微信小程序Popup彈出式,左側(cè)不動(dòng)，右側(cè)滑動(dòng)菜單相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01
這篇文章主要為大家介紹了GoJs的文本繪圖模板TextBlock使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
JavaScript中獲得CheckBox狀態(tài)的方法小結(jié)
在 JavaScript 中,獲取復(fù)選框（CheckBox）的狀態(tài)（選中或未選中）可以通過以下幾種方式實(shí)現(xiàn),以下是具體方法及示例,并通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
這篇文章主要介紹了java設(shè)計(jì)模式中觀察者模式，全文通過舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)2021-08-08
JS實(shí)現(xiàn)仿google、百度搜索框輸入信息智能提示的實(shí)現(xiàn)方法
這篇文章主要介紹了JS實(shí)現(xiàn)仿google、百度搜索框輸入信息智能提示的實(shí)現(xiàn)方法,實(shí)例分析了javascript實(shí)現(xiàn)智能提示功能的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04