vue2.0使用ES6语法的箭头函数对this作用域的理解

在做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的箭头函数也有一些需要注意的细节，我们不在这里展开去介绍了。希望本篇文章对你有所帮助。