微信小程序开发中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 相关文章推荐
onpropertypchange
Jul 01 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
一个多文件上传的例子(原创)
2006/10/09 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
js 匿名调用实现代码
2009/06/19 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
总结js函数相关知识点
2018/02/27 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python安装后的目录在哪里
2020/06/21 Python
python 下划线的不同用法
2020/10/24 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
个人廉洁自律承诺书
2014/03/27 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
给市场的环保建议书
2014/05/14 职场文书
个人租房协议书样本
2014/10/01 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android