微信小程序中为什么使用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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
js 小贴士一星期合集
Apr 07 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
将list转换为json失败的原因
Dec 17 Javascript
JavaScript中string对象
Jun 12 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
Vuex简单入门
Apr 19 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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中的extract的作用分析
2008/04/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python的文件操作方法汇总
2017/11/10 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
高二地理教学反思
2014/01/24 职场文书
科研先进个人典型材料
2014/01/31 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js