微信小程序中为什么使用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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
jquery自定义下拉列表示例
2014/04/25 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
几种tab切换详解
2017/02/03 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
Python 不同对象比较大小示例探讨
2014/08/21 Python
详解Django中的form库的使用
2015/07/18 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
怎么快速自学python
2020/06/22 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
学生的自我鉴定范文
2013/10/24 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
大学生工作自荐书
2014/06/16 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
详解Python中*args和**kwargs的使用
2022/04/07 Python