var that =this的用法详解

在小程序开发中，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关键字的作用域有关！

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的变量

var that =this的用法详解相关推荐

javaScript中const,var,let区别与用法详解
业务场景:今天想从正则表达式数组对象取出几个参数的值,发现好多人都用的const声明的变量,这里一起总结一下吧. 上一篇-->前端使用正则表达式获取地址栏URL参数的值并将需要的参数值展示在页面 ...
【JS基础】var formdata=new FormData() 【FormData用法详解】
FormData用法详解简介 FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即将form 中表单元素的 name 与 value 组装成一个 queryString 2.异步 ...
Ext.Net学习笔记22：Ext.Net Tree 用法详解
上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat="server"><Root> ...
js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
Linux下的awk用法详解
Linux下的awk用法详解一.awk介绍二.awk的语法三.awk常见用法四.awk其他用法五.awk语言特性一.awk介绍 1.AWK 是一种处理文本文件的语言,是一个强大的文本分析工 ...
68.connect-flash 用法详解 req,flash()
转自:http://yunkus.com/connect-flash-usage/ connect-flash 用法详解前端工具 2016-10-05 2016-10-05 朝夕熊 11 ...
教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
Extjs Window用法详解 3 打印具体应用，是否关掉打印预览的界面
Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面 Extjs 中的按钮元素 { xtype: 'buttongroup', title: '打印', items: [ me. ...
php sprintf 后面补0,PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
下面小编就为大家带来一篇PHP数字前补0的自带函数sprintf 和number_format的用法(详解).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧很多时候我们 ...
fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解，最近时间空余，总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...

var that =this的用法详解

var that =this的用法详解相关推荐

最新文章

热门文章