微信小程序中为什么使用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 相关文章推荐
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
JS图片预加载插件详解
Jun 21 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
JavaScript async/await原理及实例解析
Dec 02 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效率,提高php性能的一些方法
2011/03/24 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
php 保留字列表
2012/10/04 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
Python编写登陆接口的方法
2017/07/10 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python烟花效果的代码实例
2020/02/25 Python
python3 logging日志封装实例
2020/04/08 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
员工廉洁自律承诺书
2014/05/26 职场文书
项目合作协议书
2014/09/23 职场文书
2014年新教师工作总结
2014/11/08 职场文书
2014年护士长工作总结
2014/11/11 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript