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

前端之家收集整理的这篇文章主要介绍了javascript – ECMA6中的nameFunction(){}和nameFunction()=> {}之间的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我开始学习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语法吗?

解决方法@H_403_16@
在您的三个选项中,ES5中仅支持第一个选项.另外两个是ES6中的补充.

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

当您使用第二个箭头语法时,这不是将其设置为第一个和第三个主机对象.这是箭头语法的功能之一,因此当您希望将其设置为主机对象时,不应使用它.相反,这将被设置为代码定义的词汇上下文 – 通常被称为“封闭上下文中的这个值”或“您的情况下的词汇值”,在这种情况下,这将是什么主机对象最初被声明为显然未定义.

这是一个关于箭头功能的很好的参考文章ES6 In Depth: Arrow functions

猜你在找的JavaScript相关文章