微信小程序中为什么使用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使用cookie
Feb 02 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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
谨慎使用PHP的引用原因分析
2012/09/06 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python和Bash结合在一起的方法
2020/11/13 Python
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
大学军训感想
2014/02/12 职场文书
文明生主要事迹
2014/05/25 职场文书
个人主要事迹材料
2014/08/26 职场文书
庆国庆活动总结
2014/08/28 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL