vue普通函数与箭头函数

其实两者最大的不同就是它们的this指向。

普通函数

普通函数中的this代表它的直接调用者, 例如 obj.cal() ,那么cal()方法中的this就是obj，而如果没找到直接调用者,则this指的是 window。

箭头函数

箭头函数不绑定this，它会捕获所在的上下文的this值，作为自己的this值。

两者对比示例

普通函数：

var name = '张三'；
var person = {
        name:'小马哥',           
        age:18,
        fav:function(){
            console.log(this)
            console.log(this.name)
        }
    }
person.fav();
// name: "小马哥"

此时this指向的是使用它的对象，也就是person对象。

箭头函数：

var person2 = {
    name:'小马哥',
    age:18,
    fav: ()=>{
         // 当前this指向了定义时所在的对象（window）
         console.log(this);
      }
    }
person2.fav();
// Window

使用箭头函数，它表示定义时所在的对象window。

什么时候使用箭头函数

当把一个函数的结果（返回值）作为另一个函数的参数的时候，就可以使用箭头函数了。比如使用axios回显数据的时候：

axios.get('static/data.json').then(function(res){
	console.log(this)    //undefined
	this.user = res.data.user
})

以上的代码会报错，因为在外部，this指向的是当前创建的vue实例，而在这些函数内部，使用例如axios与后台交互后回调函数的内部的this并非指向当前的vue实例。如果想拿到后台回传的数据更新data里的数据，不能在回调函数中直接使用this。这个时候我们有两种方式：定义一个变量来储存this或者使用箭头函数。

第一种方法：

var _this = this
axios.get('static/data.json').then(function(res){
	console.log(this)    //undefined
	console.log(_this)   //VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
	_this.user = res.data.user
})

第二种方法：

axios.get('static/data.json').then((res) => {
	console.log(this)      //VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
	this.user = res.data.user
})