美文网首页
vue中this指向问题

vue中this指向问题

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-01-06 18:28 被阅读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赋值给另一个变量再使用


    相关文章

      网友评论

          本文标题:vue中this指向问题

          本文链接:https://www.haomeiwen.com/subject/mfehcrtx.html