微信小程序开发中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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
loading动画特效小结
Jan 22 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
js+html5生成自动排列对话框实例
2017/10/09 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
python:socket传输大文件示例
2017/01/18 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
股份转让协议书
2014/04/12 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
停电调休通知
2015/04/16 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server