微信小程序开发中var that =this的用法详解


Posted in Javascript onJanuary 18, 2020

在微信小程序开发中,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 }) 
    }, 
   }) 
  } 
 
 })

此时运行代码就会报以下错误!

微信小程序开发中var that =this的用法详解

从报错中得知setData这个属性读不到,为何读不到?这跟this关键字的作用域有关!

this作用域分析:

1.在Page({})里面,this关键字指代Page({})整个对象

2.因此可以通过this关键字访问或者重新设置Page({})里data的变量

3.然而在loadData函数中使用了wx.request({})API这个方法导致在wx.request({})里没办法使用this来获取Page({})对象

4.虽然在wx.request({})里没法使用this获取Page({})对象,但是可以在wx.request({})外面先把this存在某个变量中,所以就有了var that =this 这个声明。此时that指代Page({})整个对象,这样子就可以在wx.request({})里使用that访问或者重新设置Page({})里data的变量

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
JavaScript实现滑动门效果
Jan 18 #Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 #Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 #Javascript
JS数组方法join()用法实例分析
Jan 18 #Javascript
JavaScript进制转换实现方法解析
Jan 18 #Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 #Javascript
vue实现扫码功能
Jan 17 #Javascript
You might like
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php设置编码格式的方法
2013/03/05 PHP
php中session使用示例
2014/03/29 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
快递业务员岗位职责
2014/01/06 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
学校安全防火方案
2014/06/07 职场文书
三严三实学习心得体会
2014/10/13 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python