Vue2中箭头函数和普通函数的this指向问题详解

Vue2中箭头函数和普通函数的this指向问题详解

在Vue2开发中，箭头函数和普通函数的this指向问题是一个常见的困惑点。本文将详细解析两者的区别，并通过具体示例展示在不同场景下的应用，帮助开发者更好地理解和使用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指向谁。