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