在做vue項目時用到了axios，但是發現axios請求之後的回調函數裏this並不指向當前vue實例，導致瀏覽器報錯。
部分代碼：test:function(){
let _self = this;//在外層函數內定義變量存儲當前vue實例。
this.$axios.post("url",{ }).then(function(res){
console.log(this);//結果是：undefined
console.log(_self );//結果是：VueComponent {_uid: 10, _isVue: true, $options: Object…}
})
}
從以上結果來看，在methods下的函數this指向的是當前創建的vue實例，而在這些函數內部使用例如axios與後臺交互後回調函數的內部的this並非指向當前的vue實例，若想拿到後臺回傳的數據更新data裏的數據，不能在回調函數中直接使用this，要用外部函數定義的變量存儲的this，也就是當前vue的實例。
但這裏作者更推薦使用ES6新定義的箭頭函數=> 箭頭函數相當於匿名函數，並且簡化了函數定義。它看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法作用域，由上下文確定。此時this在箭頭函數中已經按照詞法作用域綁定了。那我們上文那段代碼要如何修改呢？
部分代碼：
test:function(){
this.$axios.post("url",{ }).then( (res) => {console.log(this );//結果是：VueComponent {_uid: 10, _isVue: true, $options: Object…}
})
}
很明顯，使用箭頭函數之後，箭頭函數指向的函數內部的this已經綁定了外部的vue實例了，是不是很方便呢？學好ES6的語法，我們就可以慢慢拋棄一些費力還不便於理解的代碼寫法了。
當然，使用ES6的箭頭函數也有一些需要注意的細節，我們不在這裏展開去介紹了。希望本篇文章對你有所幫助。