ECMA6中nameFunction(){}和nameFunction()=> {}之间的区别

Question

我开始学习Vue.js和ECMA6语法,我在教程中看到了这一点:

methods: {
  someMethod: function() { 
    console.log(this) // this works
  }
} 

然后我认为语法可能是:

methods: {
  someMethod: () => {
    console.log(this) // this undefined
  }
}

但这有效:

methods: {
  someMethod () {
    console.log(this) // this works
  }
}

可以解释差异和ECMA5的语法吗？

Answer 1

在您的三个选项中,ES5仅支持第一个选项.另外两个是ES6中的新增功能.

第三个选项是第一个选项的ES6快捷方式,因此它们在ES6中的工作方式相同.

当您使用第二个箭头语法时,this不会将其设置为第一个和第三个中的主机对象.这是箭头语法的功能之一,因此在您希望this设置为主机对象时不应使用它.相反,this将设置为定义代码的词汇上下文 - 通常称为" this封闭上下文中的值"或"此词的值",在您的情况下,这将this是宿主对象的时间.最初宣布哪个显然是undefined.

这是关于箭头功能的一篇很好的参考文章:ES6深度:箭头功能