前言:

  在小程序或者js开发中,经常需要使用var that = this;开始我以为是无用功,(原谅我的无知),后来从面向对象的角度一想就明白了,下面简单解释一下我自己的理解,欢迎指正批评。


代码示例:

 Page({
data: {
test:10
},
testfun1: function () {
console.log(this.data.test) //
function testfun2(){
console.log(this.data.test) //undefined
}
testfun2()
},
})
  • 第一个this.data.test打印结果为10,原因是因为this的指向是包含自定义函数testfun1()的Page对象。
  • 第二个打印语句实际上会报错,原因是在函数testfun2()中,this指向已经发生改变,也不存在data属性,会error:Cannot read property 'data' of undefined;

  解决办法 为复制一份this的指向到变量中,这样在函数执行过程中虽然this改变了,但是that还是指向之前的对象。

   testfun1: function () {
var that = this
console.log(this.data.test) //
function testfun2() {
console.log(that.data.test) //
}
testfun2()
},
onLoad:function(){
this.testfun1();
}

  编译之后没有报错,正常打印出结果;

  再来一项更明白的例子:

   onLoad: function() {
var testvar = {
name: "zxin",
testfun3: function() {
console.log(this.name);
}
}
testvar.testfun3();
}

  编译后输出结果:zxin。this.name指的是testvar对象,testfun3()也属于testvar对象。

 总结:

大家知道this是指当前对象,只是一个指针,真正的对象存放在堆内存中,this的指向在程序执行过程中会变化,因此如果需要在函数中使用全局数据需要合适地将this复制到变量中。

小程序中为什么使用var that=this的更多相关文章

  1. 微信小程序中rpx与rem单位使用

    原作者: 小小小   来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...

  2. 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

    在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

  3. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  4. JS 条形码插件--JsBarcode 在小程序中使用

    在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...

  5. 微信小程序中使用 <web-view> 内嵌 H5 时,登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

  6. 微信小程序中用户登录和登录态维护

    提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...

  7. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  8. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  9. 微信小程序中的循环遍历问题

    比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环 ;i<;i++){ console.log(i); } 确实结果也是这样: 但是,如果我在循环时同时调用wx的api接口1 ...

随机推荐

  1. day04 列表增删改查、元祖以及range

    01 课前小甜点 千万不要随意做决定 只要你做了决定,你要坚持下去. 02 昨日内容回顾 int <---> bool : 非0 True 0 False True 1 False 0 i ...

  2. spring cloud学习笔记五 网关服务zuul

    网关服务是指,客户端发送的请求不用直接访问特定的微服务接口,而且是经过网关服务的接口进行交互,网关服务再去到特定的微服务中进行调用.   网关服务的路由功能和Nginx的反向代理一样,所有的服务都先会 ...

  3. Es学习第十课,ElasticSearch集群搭建

    前面几课我们已经把ES的基本概念和查询了解了,大家知道ES的核心优势就是天生支持分布式,所以,这课我们专门讲讲怎么搭建实现ES的集群部署. ES分布式原理 1.es分布式概念 主分片(Primary ...

  4. 分组函数 partition by 的详解,与order by 区别

    partition  by关键字是分析性函数的一部分,它和聚合函数(如group by)不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录, partition  by ...

  5. Webpack 4 和单页应用入门

    引言 本文转自https://github.com/wallstreetcn/webpack-and-spa-guide,为了方便阅读转到博客园. webpack 更新到了 4.0,官网还没有更新文档 ...

  6. ldd3 第12章 PCI驱动程序

    PCI接口 PCI寻址 引导阶段 配置寄存器和初始化 MODULE_DEVICE_TABLE 注册PCI驱动程序 佬式PCI探测 激活PCI设备 访问配置空间 访问I/O和内存空间 PCI中断 硬件抽 ...

  7. BUUCTF | [HCTF 2018]admin

    首先爬一遍整个网站,发现有没注册的时候有“login”,"register",这两个页面,注册一个123用户登录后发现有 "index“,”post“,”logout“, ...

  8. Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) 解决方法

    可以通过如下命令来解决,具体就是先关闭服务器,然后再重启服务器: cd /etc/init.d sudo service mysql stop sudo service mysql start

  9. MySQL清除表数据而保留表结构TRUNCATE TABLE

    有时候我们会需要清除一个表格中的所有资料.要达到者个目的,一种方式是使用 DROP TABLE 指令,不过这样整个表格就消失,表无法再被用了.另一种方式就是运用 TRUNCATE TABLE 的指令. ...

  10. 在阿里云 Ubuntu上通过nginx+uwsgi服务器部署Django出现的502错误

    https://blog.csdn.net/luojie140/article/details/76919471 https://blog.csdn.net/sinat_21302587/articl ...