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!'});// 輸出testthis.testFunction();}} }

通過將outerFunction()中的this指針傳遞給innerFunction()就可以了，非常簡單和實用！

3 總結

寫js還是不能夠用寫java的思維模式去寫，就像這次一樣，覺得自己this的用法完全沒有問題，但實則錯得徹徹底底，容易掉到坑里去。不過這也是不去先了解語言細節，直接開搞的惡果，導致走很多的彎路，有點難受。

總結

以上是生活随笔為你收集整理的Vue中this的指向问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。