微信小程序中为什么使用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 相关文章推荐
javascript针对DOM的应用实例(一)
Apr 15 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
应届生.NET方向面试题
2015/05/23 面试题
大班上学期幼儿评语
2014/04/30 职场文书
五一活动标语
2014/06/30 职场文书
小学教育见习报告
2014/10/31 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
销售经理岗位职责
2015/01/31 职场文书
单位证明范文
2015/06/18 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫