Vue中this的指向问题

Vue中this指向

最近一直在做毕业设计，学习了Vue用来写了很多的前端代码，不得不说js对我这个“Java前端程序员”有些太不友好，时不时都能遇到一些坑，this就是其中之一。

1 问题代码

为了凸显问题，简化了代码，outerFunction调用了innerFunction，outerFunction中的消息提示框能够显示出来，而innerFunction中就提示：this.$message is not a function。这是什么问题呢？

export default {
  data() { 
    // ...
  },
  methods: {
    outerFunction() {
      this.$message({
        type: 'success',
        message: 'outer!'
      });
      this.$options.methods.updateHandler();
    },
    innerFunction() {
      this.$message({
        type: 'success',
        message: 'inner!'
      });
    }
  }
}

在简化之后可能很容易就发现了问题应该出在this上，而当时由于代码太多了，我误以为是其他代码或则Element UI提供的message组件出了问题，在其他地方绕了些时间。所以这也是在提醒我们排查bug时先注释掉无关代码！！！

js里的this和我想当然的this天差地别，误以为this始终是指向全局的。其实this的指向是动态的，是根据上下文来确定的（参考文章：彻底理解js中this的指向)。

2 正确的写法

经过分析可知，outerFunction()中的this是指向全局的没有问题，而innerFunction中的this并不是指向全局的，其实是指向methods（下面我们就能看到），所以自然不能够访问到$message()方法。我们改写innerFunction()让它能够指向全局：

export default {
  data() { 
    // ...
  },
  methods: {
    testFunction() {
      console.log('test');
    }
    outerFunction() {
      this.$message({
        type: 'success',
        message: 'outer!'
      });
      this.$options.methods.updateHandler(this);
    },
    innerFunction(_this) {
      // 注意_this
      _this.$message({
        type: 'success',
        message: 'inner!'
      });
      // 输出test
      this.testFunction();
    }
  }
}

通过将outerFunction()中的this指针传递给innerFunction()就可以了，非常简单和实用！

3 总结

写js还是不能够用写java的思维模式去写，就像这次一样，觉得自己this的用法完全没有问题，但实则错得彻彻底底，容易掉到坑里去。不过这也是不去先了解语言细节，直接开搞的恶果，导致走很多的弯路，有点难受。