javascript - 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 的值”或“词法值” of this"，在您的情况下，当宿主对象最初被声明为 undefined 时，this 是什么。

这是一篇关于箭头函数的很好的引用文章:ES6 In Depth: Arrow functions