微信小程序中为什么使用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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
斜45度寻路实现函数
2009/08/20 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
基于javascript实现碰撞检测
2020/03/12 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
Python多线程下载文件的方法
2015/07/10 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
python中树与树的表示知识点总结
2019/09/14 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
法学专业个人求职信
2013/09/26 职场文书
小学三年级学生评语
2014/04/22 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
学校运动会广播稿
2014/10/11 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书