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的用法完全没有问题,但实则错得彻彻底底,容易掉到坑里去。不过这也是不去先了解语言细节,直接开搞的恶果,导致走很多的弯路,有点难受。

Logo

前往低代码交流专区

更多推荐