微信小程序中为什么使用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 相关文章推荐
php 中序列化和json使用介绍
Jul 08 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
Javascript之String对象详解
Jun 08 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
Vuex实现数据增加和删除功能
Nov 11 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
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数组内存耗用太多问题的解决方法
2010/04/05 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
node读写Excel操作实例分析
2019/11/06 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
用Python实现随机森林算法的示例
2017/08/24 Python
Python random模块用法解析及简单示例
2017/12/18 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
python中的django是做什么的
2020/07/31 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
中学生检讨书1000字
2014/10/28 职场文书
餐厅开业活动方案
2019/07/08 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js