微信小程序中为什么使用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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
Prototype Template对象 学习
Jul 19 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
Vue.js快速入门教程
Sep 07 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 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
JAVA/JSP学习系列之六
2006/10/09 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python查找相似单词的方法
2015/03/05 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Python函数基本使用原理详解
2020/03/19 Python
Python 实现进度条的六种方式
2021/01/06 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
2014年财务科工作总结
2014/11/11 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
Java死锁的排查
2022/05/11 Java/Android
vue实现登陆页面开发实践
2022/05/30 Vue.js