微信小程序开发中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的变量

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    前言: 在小程序或者js开发中,经常需要使用var that = this;开始我以为是无用功,(原谅我的无知),后来从面向对象的角度一想就明白了,下面简单解释一下我自己的理解,欢迎指正批评. 代码示例: Page({ data: { test:10 }, testfun1: function () { console.log(this.data.test) // 10 function testfun2(){ console.log(this.data.test) //undefined }

  • 微信小程序开发中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': 'applicat

  • 微信小程序wx:for和wx:for-item的用法详解

    wx:for="{{list}}"用来循环数组,而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的 如果是一维数组,按照如下方式循环出来: <view wx:for="{{list}}"> {{index}} {{item.name}} </view> 以上代码中,item即为list的别名. 如果是二维甚至多维数组,按照如下方式循环: <view wx:for=&q

  • 微信小程序 开发中遇到问题总结

    微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function(){ let that = this; wx.request({ url: 'https://a.com/url.php', method: 'GET', success: function(e){ that.data = 123; } }) }; }) //conte

  • 深入解析微信小程序开发中遇到的几个小问题

    本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了 item.img = '/goods/img/图片.png' <image src=" { { item.img } } " class="image"> </image> 经过仔细观察发现,路径是没问题的,问题在于图片名不能是中文的,把它改成字母+数字就好了. 使用FileSystemManager.readdir(Object object)方法读取本地文件夹中的所有图片,报错

  • Echarts在Taro微信小程序开发中的踩坑记录

    Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

  • 原生微信小程序开发中 redux 的使用详解

    原生微信小程序开发中 redux 的使用详解

    前提 复杂场景中有不少数据需要在多个不同页面间来回使用和修改.但是小程序页面直接的数据通信方式十分的简单.通常情况需要自己维护一个全局的对象来存放共有数据.但是,简单的维护一个共有数据实体,会随着业务逻辑的不断复杂化而变的过分庞大,并且数据的修改往往无法很好的溯源.加之公共数据实体中数据的修改和页面的UI之间没有太好的同步手段,往往需要在页面和对应的数据实体中同时都维护一份相同的数据,操作十分的不方便. 之前使用过Taro以react+redux的结构来开发微信小程序,依托redux整体上可以解

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • SpringBoot+微信小程序实现文件上传与下载功能详解

    SpringBoot+微信小程序实现文件上传与下载功能详解

    目录 1.文件上传 1.1 后端部分 1.2 小程序前端部分 1.3 实现效果 2.文件下载 2.1 后端部分 2.2 小程序前端部分 2.3 实现效果 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 <!--文件上传与下载相关的依赖--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fil

  • 小程序开发之云函数的使用教程详解

    小程序开发之云函数的使用教程详解

    目录 1.云函数 1.1 云函数API和云函数创建 2.云函数案例 1.云函数 云函数是部署在云端的函数,他和小程序本地的函数存在很大的区别,云函数应用涉及云端云函数定义和本地引用云端云函数的API接口两个问题. 1.1 云函数API和云函数创建 1.1.1 小程序云函数API接口 小程序云函数API接口是指小程序调用云端函数的接口,(和wx.request()类似).小程序提供了wx.cloud.callFunction()接口作为云函数API接口,它的属性如表所示. 属性 类型 默认值 必填

  • 微信小程序实现页面导航与传参功能详解

    微信小程序实现页面导航与传参功能详解

    目录 一.页面导航 概述 分类 声明式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 编程式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 导航传参 声明式导航传参 编程式导航传参 一.页面导航 概述 顾名思义,页面导航指的是页面之间的相互跳转, 而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数. 分类 声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转 编程式导航:通过调用小程序专门的导航API,实现页

随机推荐