vue中this指向问题
根据VUE官方文档给出的解释
在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,
this指向调用它的Vue实例,即(new Vue)
在普通函数中,this指向调用它对象。
在箭头函数中,this指向的是箭头函数本身
一般我们用const that = this 来保存当前this的状态,
比如当前指向的是window, 那么保存this状态以后,在函数中用that即可表示指向window。
注:【普通函数的this】
普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项:
1、this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj。
2、在默认情况(非严格模式,未使用 ‘use strict’),如果函数没有直接调用者,this为window
3、在严格模式下,如果函数没有直接调者,this为undefined
4、使用call,apply,bind绑定的,this指的是绑定的对象
1)对于普通函数(包括匿名函数),this指的是直接的调用者,
在非严格模式下,如果没有直接调用者,this指的是window。
showMessage1()里setTimeout使用了匿名函数且没有直接调用者,this指向window。
2) 箭头函数是没有自己的this,在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例,所以它里面使用的this指向vue实例。
绑定vue实例到this的方法:
1、使用bind将匿名函数的指向变为Vue实例(bind不会自动执行,默认返回一个函数)
showMessage1()可以改为:
2、把vue实例的this赋值给另一个变量再使用
上一篇下一篇