最近写项目遇到很多this指向的问题,今天来写一下我总结的this指向

        看了很多文章,之前也在私下总结过,对于正常函数,谁调用的它,this就指向谁,而箭头函数没有this,它的this指向一般就是上下文中,与谁调用它没关系。

        但是在Vue实例中,methods中如果用的是正常函数,那么它的this就指向Vue实例;如果是箭头函数,this就指向window对象。

        在Vue的官方文档是这么解释的:

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。

注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

1. Vue中生命周期钩子和自定义方法中的this指向当前的 Vue 实例:

        生命周期钩子的 this 上下文指向调用它的 Vue 实例

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义。

2. Vue 中回调函数中的 this:

  1. 若回调函数为匿名函数,非严格模式下指向 window,严格模式下为 undefined。
  2. 若回调函数为自定义方法,则 this 指向 Vue 实例。
  3. 若回调函数为 箭头函数,则 this 指向 Vue 实例。

3. Vue 中 addEventListener 中的 this

        通常,事件监听函数中的 this 都指向绑定事件的那个元素, 但是在 Vue 中,监听函数中的 this 也指向 Vue 实例

总结:除了回调函数中的 this ,其它地方的 this 均指向 Vue 实例

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐