踩坑笔记(二):箭头函数和普通函数的this指向

本文探讨在JavaScript中,特别是在使用mpVue搭建小程序项目时遇到的wx.getUserInfo回调函数中this指向问题。普通函数的this指向取决于调用方式,而箭头函数的this继承自定义函数时的上下文,导致在wx.getUserInfo的success回调中,使用箭头函数可以正确指向vue实例。此外,还介绍了不同调用场景下函数的this指向规则以及箭头函数的特性,如不能用作构造函数,不能使用arguments等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:在使用mpVue搭建小程序项目中,调用wx.getUserInfo时,sucess函数下this无法指向vue实例,进而给data属性赋值,无法实现响应式结果;修改为箭头函数后实现。

methods: {
        handleGetUserInfo() {
          wx.getUserInfo({
            success:function (res) {
              // success
              console.log(this)
              this.userInfo=res.userInfo;
              console.log(this.userInfo);
            }
}   

普通函数下打印this结果:

**其实这里还是不太清楚,是内部调用时是通过funcrion(res)调用的么?

在这里插入图片描述
箭头函数下打印this结果:

**这里应该是在底层封装定义wx.getUserInfo时,指向的是最外层对象,放在这里指向的就是vue实例
在这里插入图片描述
案例2:

在这里插入图片描述


- 正常普通函数调用时的this指向

this 解析器在每次调用函数时都会向函数内部传递一个隐含的参数this; this指向的是一个对象,这个对象称为函数执行的上下文对象;
根据函数调用方式的不同,this会指向不同的对象:
1.以函数的形式调用时,this永远都是window。 如fun();
2.以方法的形式调用时,this即调用方法的对象。 如obj.sayName();
3.以构造函数的形式调用时,this就是新创建的实例对象。 如var obj=new Person();
4. 使用call和apply调用时,this是调用方法的那个对象;
5. 在事件的响应函数中,给谁绑定的,this就指的是谁

- 箭头函数的this指向

  1. 箭头函数中没有自己的this,它的this是继承而来;默认指向定义箭头函数时所处的对象(宿主对象),而不是执行它时的对象。
  2. 函数注意事项:
    不能用作构造函数
    不能使用arguments
    不能作为对象的方法调用,因为还是指向上下文,而不是调用的对象
    如果需要this操作,不能用作addEventListener里传的参数
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值