【小程序】为什么使用let that=this

this 会随着上下文环境而变换它的指向,在当前作用域中设置一个变量用来存储 this 可以防止在其他地方找不到 this 的错误

一般情况

举个例子:

$("#btn").click(function(){
    var that = this;//这里this和that都代表了"#btn"这个对象
    $(".tr").each(function(){
          this;//在这里this代表的是每个遍历到的".tr"对象
          that;//仍代表"#btn"对象
    })
})

微信小程序api

一般情况下,在微信小程序提供的api中不要调用this,原因是它的this一般指向undefined。

如:

//这是methods中的方法
scancode({
	//1号位置
	//这里的this不指向undefined
	let that=this
	wx.scanCode({
	   //如果扫码成功
	   success(code) {
	   	//2号位置
	   //这里的this指向undefined
	   	console.log('request-this-that',this===that,this,that)
	   }           
	})
})

在这里插入图片描述
如果是vue框架,1号位置的this会指向vue实例:在Vue中,methods内方法使用this访问data数据的分析 - 掘金 (juejin.cn)
不过这里是小程序的mpx框架,应该跟vue是类似的,指向mpx实例。

而2号位置的this就指向undefined,因为wx.api中的this就指向undefined。

更具体的解释:

wx.scanCode是一个微信小程序提供的api,它是一个方法,需要传入一个大括号括起来的对象。
2号位置的this是wx.scanCode传入的参数对象中的回调函数success中的this,它指向undefined。

微信小程序与箭头函数

微信小程序中有this:
在这里插入图片描述
输出为:
在这里插入图片描述
来源:不是说在api中不用使用该页面的this吗?但是为什么可以正常跳转? | 微信开放社区 (qq.com)

这里显然是在API中,为什么this有值呢?因为箭头函数

普通函数的this指向调用者。
箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象。

这与箭头函数的作用域有关。箭头函数的作用域是和父级上下文绑在一起的。

我们知道作用域分为全局作用域函数作用域(ES6有块级作用域{})。

  • 函数作用域:在函数中声明的变量,会成为函数的局部变量。这些变量的作用范围就在函数里,即函数作用域。
  • 全局作用域:除函数作用域的都是全局作用域。全局可以访问到。(注意,ES6之后有块级作用域了)

而箭头函数虽然是函数,但它没有自己的this。根据作用域链,它的this会指向它的父级的this,即箭头函数的作用域是和父级上下文绑在一起的

至于为什么这里的this有指向,因为此箭头函数的父级上下文的this有指向。

参考

vue中let that=this的作用_let that = this;_晚风914的博客-CSDN博客
不是说在api中不用使用该页面的this吗?但是为什么可以正常跳转? | 微信开放社区 (qq.com)
ES6箭头函数的this指向详解 (zhihu.com)
箭头函数的作用域_箭头函数有作用域吗_yvan_csdn的博客-CSDN博客

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

karshey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值