TypeError: Cannot read properties of undefined (reading ‘XXX‘)，说说javaScript中的this、that和箭头函数

需求

el-table中，点击删除时的处理

先看代码和错误

handleModuleDelete(index, row) {
      this.$confirm(`确认要删除模块?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () { 
         //其它业务逻辑处理       
         this.moduleList.splice(index,1);
      }).catch((error) => {
        console.log(error);
      });
    },

console中的出错信息：

TypeError: Cannot read properties of undefined (reading 'moduleList')
    at eval (。。。。)

反复检查，确认变量名没有错。那么，就只有this.错了。。。 

js中的this

在Vue组件中的，this 指向当前组件的实例。可以通过 this 访问组件的属性和方法。但是，某些情况下，this的指向可能发生变化。

比如本案例中，then中，调用了一个匿名函数function，于是，在这个函数内部，this就指向了这个匿名函数对象，而不是当前的组件实例了。

但是，这个匿名函数对象中，是没有moduleList这个属性的，于是出错。

修复方案1

了解了this指向的变化，要修复这个问题，我们就需要保证在匿名函数内部时，仍然指向当前组件实例，比较常用的方法就是在进入匿名函数之前，将this保存下来，如下：

• 声明that，并将this赋值给它；
• 在匿名函数内部，使用that，而不是this，这样就保证that指代的仍然是当前组件，而不是匿名函数对象

handleModuleDelete(index, row) {
      let that = this;
      this.$confirm(`确认要删除模块?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () { 
         //其它业务逻辑处理       
         that.moduleList.splice(index,1);
      }).catch((error) => {
        console.log(error);
      });
    },

js中的箭头函数

js中，有一种特殊的函数，叫做箭头函数，它没有自己的this，它的this继承自包含它的函数作用域，也就是说，箭头函数内部的this，与调用它的函数的指向相同。

修复方案2

所以，我们将普通匿名函数改为箭头函数，同样可以解决这个问题。

handleModuleDelete(index, row) {      
      this.$confirm(`确认要删除模块?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { 
         //其它业务逻辑处理       
         this.moduleList.splice(index,1);
      }).catch((error) => {
        console.log(error);
      });
    },

总结

为了避免this指向来回飘的问题，尽量使用箭头函数，而非普通匿名函数吧。