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


Posted in Javascript onAugust 27, 2019

前言:

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

代码示例:

Page({
 data: {
  test:10
 },
 testfun1: function () {
  console.log(this.data.test) // 10
  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) // 10
  function testfun2() {
   console.log(that.data.test) // 10
  }
  testfun2()
 },
 onLoad:function(){
  this.testfun1();
 }

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

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

再来一项更明白的例子:

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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
JQuery for与each性能比较分析
May 14 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 #Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 #Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 #Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 #Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 #Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 #Javascript
You might like
jQuery 全选效果实现代码
2009/03/23 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
js中new一个对象的过程
2017/02/20 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
webpack打包node.js后端项目的方法
2018/03/10 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python黑魔法之参数传递
2016/02/12 Python
python分布式环境下的限流器的示例
2017/10/26 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python3 字符串知识点学习笔记
2020/02/08 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
英语商务邀请函范文
2014/01/16 职场文书
教师党员承诺书
2014/03/25 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang