es6函数问题

Question

今天在用vue的时候突然有个疑问：

data () {    return {        value: 1
    }
},methods: {    a: function () {        console.log(this.value) //输出1
    },
    b () {        console.log(this.value) //输出1
    },    c: () => {        console.log(this.value) //输出undefined
    }
}

请问上面a() b() c()三种写法有什么区别？用的时候该如何选择？

Answer 1

a和b其实是一样的，a的ES5的写法，b是ES6的写法，c使用箭头函数，会返回一个绑定当前执行上下文中的this，此处绑定的 this 是当前函数体内的this,严格模式下为undefined;

Answer 2

a 是属性函数b 是函数bc 属性函数指向箭头函数，箭头函数绑定 this，在 vue 里面会自动帮你绑定 this指向组件对象，如果你使用了箭头函数。就会更改了原来 vue 的this对象。