微信小程序中为什么使用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 相关文章推荐
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
基于mysql的论坛(5)
2006/10/09 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php发送与接收流文件的方法
2015/02/11 PHP
actionscript与javascript的区别
2011/05/25 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python3爬取各类天气信息
2018/02/24 Python
python使用mysql的两种使用方式
2018/03/07 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python logging模块的使用详解
2020/10/23 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
求职自荐信怎么写
2014/03/06 职场文书
普通党员对照检查材料
2014/09/24 职场文书
技术股东合作协议书
2014/12/02 职场文书
优秀团队申报材料
2014/12/26 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS