踩坑笔记（二）：箭头函数和普通函数的this指向

最新推荐文章于 2023-01-13 16:02:13 发布

煲仔灬饭

最新推荐文章于 2023-01-13 16:02:13 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

分类专栏：踩坑笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43339112/article/details/109907892

踩坑笔记专栏收录该内容

17 篇文章

订阅专栏

本文探讨在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指向

箭头函数中没有自己的this，它的this是继承而来；默认指向定义箭头函数时所处的对象（宿主对象），而不是执行它时的对象。
函数注意事项：
不能用作构造函数
不能使用arguments
不能作为对象的方法调用，因为还是指向上下文，而不是调用的对象
如果需要this操作，不能用作addEventListener里传的参数