快捷導(dǎo)航

微信小程序開發(fā)中var that =this的用法詳解

更新時(shí)間：2020年01月18日 10:47:24 作者：阿山

這篇文章主要介紹了微信小程序開發(fā)中var that =this的用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在微信小程序開發(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.因此可以通過(guò)this關(guān)鍵字訪問(wèn)或者重新設(shè)置Page({})里data的變量

3.然而在loadData函數(shù)中使用了wx.request({})API這個(gè)方法導(dǎo)致在wx.request({})里沒辦法使用this來(lái)獲取Page({})對(duì)象

4.雖然在wx.request({})里沒法使用this獲取Page({})對(duì)象，但是可以在wx.request({})外面先把this存在某個(gè)變量中，所以就有了var that =this 這個(gè)聲明。此時(shí)that指代Page({})整個(gè)對(duì)象，這樣子就可以在wx.request({})里使用that訪問(wèn)或者重新設(shè)置Page({})里data的變量

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

微信小程序中為什么使用var that=this

相關(guān)文章

layer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例
下面小編就為大家?guī)?lái)一篇layer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
小程序中設(shè)置緩存過(guò)期的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序中設(shè)置緩存過(guò)期的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
封裝好的省市地區(qū)聯(lián)動(dòng)控件附下載
封裝好的省市地區(qū)聯(lián)動(dòng)控件附下載...
2007-08-08
JS代碼同步文本框內(nèi)容的實(shí)例方法
這篇文章介紹了JS代碼同步文本框內(nèi)容的方法，有需要的朋友可以參考一下
2013-07-07
JavaScript判斷空值、NULL、undefined的方法對(duì)比
JavaScript五種原始類型（boolean、number、string、null、undefined）中的一種。在鑒別JavaScript原始類型的時(shí)候我們會(huì)用到typeof操作符。Typeof操作符可用于字符串、數(shù)字、布爾和未定義類型。
2022-12-12
JavaScript DOM實(shí)現(xiàn)簡(jiǎn)單留言板
這篇文章主要為大家詳細(xì)介紹了JavaScript DOM實(shí)現(xiàn)簡(jiǎn)單留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
TypeScript 安裝使用及基本數(shù)據(jù)類型
這篇文章主要介紹了TypeScript 安裝使用及基本數(shù)據(jù)類型,本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲
這篇文章主要為大家詳細(xì)介紹了javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
詳解基于webpack&gettext的前端多語(yǔ)言方案
這篇文章主要介紹了詳解基于webpack&gettext的前端多語(yǔ)言方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
JavaScript模塊規(guī)范之AMD規(guī)范和CMD規(guī)范
本篇文章給大家介紹js模塊規(guī)范之AMD規(guī)范和CMD規(guī)范，模塊化是一種處理復(fù)雜系統(tǒng)分解為代碼結(jié)構(gòu)更合理，可維護(hù)性更高的可管理的模塊的方式，對(duì)js amd cmd規(guī)范感興趣的童鞋可以來(lái)本文學(xué)習(xí)
2015-10-10