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

Answer 3

a和b使用时没区别。
c是箭头函数形式，区别具体可参考箭头函数和普通函数的区别。

Answer 4

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