微信小程序中为什么使用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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
jQuery插件之validation插件
Mar 29 jQuery
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
redux-saga 初识和使用
Mar 10 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
详解Vue中的scoped及穿透方法
Apr 18 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 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
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
js中日期的加减法
2015/05/06 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
Vue中封装input组件的实例详解
2017/10/17 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Python 多线程Threading初学教程
2017/08/22 Python
详解python多线程之间的同步(一)
2019/04/03 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
酒店副总岗位职责
2013/12/24 职场文书
授权收款委托书范本
2014/10/10 职场文书
个人工作总结范文2014
2014/11/07 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Python机器学习之底层实现KNN
2021/06/20 Python
Python代码实现双链表
2022/05/25 Python