微信小程序中为什么使用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与vbscript数据共享
Jan 09 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
Oct 10 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 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 正则表达式小结
2009/08/31 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php 中英文语言转换类代码
2011/08/11 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php调用shell的方法
2014/11/05 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
Vuex提升学习篇
2018/01/11 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
幼儿园运动会口号
2014/06/07 职场文书
黑白记忆观后感
2015/06/18 职场文书
学生会工作感言
2015/08/07 职场文书
婚宴祝酒词大全
2015/08/10 职场文书