微信小程序中为什么使用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实现禁止后退的方法
Dec 27 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 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中处理模拟rewrite 效果
2006/12/09 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
Linux Centos7.2下安装nodejs&npm配置全局路径的教程
2018/05/15 NodeJs
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
python实现统计代码行数的方法
2015/05/22 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
网站推广策划方案
2014/06/04 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
敬老月活动总结
2014/08/28 职场文书
入党转正介绍人意见
2015/06/03 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
导游词之无锡古运河
2019/11/14 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript