在这里插入图片描述
@[toc]

摘要

记录此文章是因为本人是vue初学者,刚看完尚硅谷的教学视频,到现在为止对箭头函数和普通函数的this指向问题直接弄混了,所以特意查阅相关博客并记录下自己的总结。

主要区别

  • 普通函数:(谁调用我,我的this就指向谁)
  • 箭头函数:(箭头函数没有自己的this, 它的this是继承而来, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值;或者说默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象。)

    详细说明

    注意点1:
    不被vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数=》JS引擎帮忙调用)那么请使用箭头函数,因为箭头函数中this指代vm或者vc。

注意点2:
所有被Vue管理的函数(Vue帮忙调用),最好写成普通函数(普通函数中的this代表它的直接调用者,如obj.fn(),fn的this指向就是obj。默认情况下,没有直接的调用者,this的指向为window),这样this的指向才是vm 或 组件实例对象。

举例

普通函数情况
  1. 在全局函数中,普通函数中this =》window
  2. 当普通函数被作为某个对象的方法调用时,this就等于那个对象
计算属性computed和监视属性watch情况
  1. 计算属性使用同步操作的普通函数,this => vue,
  2. 计算属性使用同步操作的箭头函数,this => window
  3. 监视属性使用同步操作的普通函数,this => vue,
  4. 监视属性使用同步操作的箭头函数,this => window,
  5. 监视属性使用异步操作的普通函数,this => window,
  6. 监视属性使用异步操作的箭头函数,this => vue
父子组件通信使用$refs.组件名称.$on('自定义事件名', 配置项)情况

在父组件App中使用$on的普通函数this指代子组件的vc,而$on的箭头函数this指代父组件的vc,所以$on的普通函数的this.studentName = name就会赋值失败,正确写法就是上面说的,要么method定义赋值,$on中直接调用,要么$on中使用箭头函数去赋值

mounted() {
this.$refs.student.$on('atguigu',function (name,...params) {
      console.log('App收到了学生名:',name,params)
      console.log("this:", this);  //使用自定义组件的配置项的普通函数中this指代子组件Student.vue的vc
      this.studentName = name
    }) //绑定自定义事件
}
---------------------------------------------------------------------------------------
mounted() {
this.$refs.student.$on('atguigu',(name,...params) => {
      console.log('App收到了学生名:',name,params)
      console.log("this:", this); //使用自定义组件的配置项的箭头函数中this指代父组件App.vue的vc
      this.studentName = name
    }) //绑定自定义事件
}
生命周期钩子函数中(如beforeCreate,created,beforeMount,mounted,beforeUpdate, updated,beforeDestroy以及destroyed)

this指代vue对象

总结

哪怕总结了这么多种情况,但是你要是问我,什么情况使用普通函数,什么情况使用箭头函数,我的回答是:

  • 不被vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数=》JS引擎帮忙调用)那么请使用箭头函数。
  • 计算属性computed和监视属性watch直接用普通函数
  • 除上述2种情况外,所有方法都在methods中定义好,不要在$on的配置项中去定义函数;另外如果你怕this指向混乱,你直接在外部定义个变量去存储当前vue组件的vm或者vc。举例说明就是,你要使用\$on去触发自定义事件,你先定义一个变量存储当前组件的vm和vc,然后你在$on的配置项的函数中直接用定义好的那个this变量去设置值,不要在配置项中的函数中用this,因为你不知道局部方法中这个this指向谁。

刘大猫
1 声望1 粉丝

如果有天突然发现路的尽头还是路的话,希望你还没错过太多沿路的风景和眼前珍惜的人。