a() {}和a: () => {}的区别？

Question

之前以为两种写法大同小异区别不大，今天才发现其实并不是这样：
项目当中这样写死活不行，bug找了好久，

SET_ACTIVE_INDEX (state, payload) {
  state.activeIndex = payload.index
}

改成下图所示就可以了

哪位同学说说a() {}等同于什么呢，不胜感激！

Answer 1

区别就是一个是普通的函数声明（对象方法的简写就是普通的函数），一个是箭头函数。this的区别。

window.a = 'window'
const obj ={
    a: 'obj',
    say() {
        console.log(this.a)
    },
    say1: function () {
        console.log(this.a)
    },
    say2: () => {
        console.log(this.a)
    }
}
obj.say() // obj
obj.say1() // obj
obj.say2() // window

Answer 2

https://developer.mozilla.org...

就是ES6新增加的一个对象方法的简写，你说的不行肯定是报错了吧，应该是环境不支持ES6

===========================================
箭头函数能运行大概率不是ES6环境问题了，看一下浏览器版本的兼容情况，或者方法里有没有用到this？

Answer 3

你的题目问的是a(){}与a:()=>{}区别，这个确实有区别，但后面你有问 a:func(){} 与 a:()=>{}区别，后面这个其实没有区别，只是写法不一样的。
第一个a(){}是声明实现一个函数对象
a:()=>{} 只能用在对象内定义中，是声明一个属性，其属性值实为一个绑定到匿名函数中成为一个方法。
如果要在非对象属性定义中使用类似a:()=>{},则应该是 var a=(()=>{})

Answer 4

两者都是对象里面声明的属性，而且属性值都是函数，但是两者最大的区别就是函数里面的this指向不同

const obj1 = {
  a () {
      console.log(this)
  }
}

const obj2  = {
  a: () => {
    console.log(this)
  }
}

obj1.a() 
obj2.a()

前者可以认为是ES6定义是属性为函数的语法糖，使用ES5表示就是

const obj1 = {
  a: function() {
      console.log(this)
  }
}

后者就是一个使用箭头函数来表示对象的属性，使用ES5来理解就是

const _this = this
const obj2 = {
  a: function() {
      console.log(_this)
  }
}

Answer 5

没有报错，不然不会找那么久，有es6环境。大哥你没有回答我的问题呢，照着mdn的那么a:func(){}和a:()=>{}有什么区别？？