ECMA6 中 nameFunction() 和 nameFunction () => 的区别

Posted 2023-02-22

【中文标题】ECMA6 中 nameFunction() 和 nameFunction () => 的区别

【英文标题】：Difference between nameFunction() and nameFunction () => in ECMA6ECMA6 中 nameFunction() 和 nameFunction () => 的区别

【发布时间】：2016-11-12 19:09:06

【问题描述】：

我开始学习 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语法吗？

【问题讨论】：

第三个是第一个的 ES6 快捷方式。当您使用第二个中的箭头语法时，this 未设置为主机对象。这是箭头语法的特性之一，因此当您希望将 this 设置为主机对象时，不应使用它。

第三个是第一个的命名快捷方式：someMethod: function someMethod() 和 someMethod() 。

@jfriend00 是的，我知道，但是，第二个和第三个之间的区别，或者这在 ECMA5 中如何更好地理解区别

第二个因词法作用域而大不相同。

或者，如果您的问题实际上与第二个 sn-p 的区别有关，则它与 Arrow function vs function declaration / expressions: Are they equivalent / exchangeable? 重复

【参考方案1】：

在您的三个选项中，ES5 仅支持第一个选项。另外两个是 ES6 中的新增内容。

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

当您使用第二个中的箭头语法时，this 不会像第一个和第三个那样设置为主机对象。这是箭头语法的特性之一，因此当您希望将 this 设置为主机对象时，不应使用它。相反，this 将设置为定义代码的词法上下文 - 通常称为“封闭上下文中 this 的值”或“this 的词法值”，在您的情况下可以是任何值this 是最初声明主机对象的时间，显然是 undefined。

这里有一篇关于箭头函数的很好的参考文章：ES6 In Depth: Arrow functions

【讨论】：

添加了更多细节和参考文章。

【参考方案2】：

对象 methods 具有方法 someMethod。在这种情况下，this 是指向对象methods 的链接。 对象 methods 具有存储一些匿名函数的属性 someMethod。在这个函数中，this 是未定义的，因为函数是匿名的。 对象methods具有内部函数someMethod。在这个函数中，this 链接到 methods，因为它是这个对象的内部命名函数（不是匿名或外部）。

祝你好运！

+ 试试这个方法

var methods1 = function() 
  var self = 
    someMethod: function()  
      console.log(self);
    
  ;
  return self;
();
    
var methods2 = function() 
  var self = 
    someMethod: () =>  
      console.log(self);
    
  ;
  return self;
();

var methods3 = function() 
  function someOtherMethod() 
    console.log(self);
  
  var self = 
    someMethod: function()  
      someOtherMethod();
    
  
  return self;
();

methods1.someMethod();
methods2.someMethod();
methods3.someMethod();

【讨论】：

在情况 1 和 3 中将 this 描述为指向 methods 的链接可以使用说明 this 在运行时设置为在其上的对象调用普通（未绑定的“函数”）函数，例如使用调用代码methods.someFunc()。但是，如果以其他方式调用该函数，this 可能具有不同甚至未定义的值。

我特意简化了我的解释，因为我认为现阶段对于 OP 来说理解所有这些东西是非常困难的。但我同意你的看法。