vue中this指向问题

2022-01-06  本文已影响0人  扶得一人醉如苏沐晨

根据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赋值给另一个变量再使用


上一篇下一篇

猜你喜欢

热点阅读