Vue中this的指向问题

红太狼 2022-03-29 01:51 268阅读 0赞

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

[js_this]: https://www.cnblogs.com/pssp/p/5216085.html