前言:在使用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里传的参数