微信小程序中为什么使用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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
python通过socket查询whois的方法
2015/07/18 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
安全协议书
2014/04/23 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书