微信小程序中为什么使用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与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
js获取视频时长代码
Apr 10 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 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
php 数组的指针操作实现代码
2011/02/08 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
详解JavaScript中的函数、对象
2019/04/01 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
会计电算化个人求职信范文
2014/01/24 职场文书
大学信息公开实施方案
2014/03/09 职场文书
网站客服岗位职责
2014/04/05 职场文书
先进基层党组织材料
2014/12/25 职场文书
公司员工培训管理制度
2015/08/04 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS