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将被设置为定义代码的词汇上下文 - 通常称为＆＃34;封闭上下文中的this的值＆＃34;或者这个＆＃34;词汇的价值＃34;在你的情况下，当最初声明主机对象时显然是this时，undefined是什么。

这是一篇关于箭头功能的好文章：ES6 In Depth: Arrow functions

Answer 2

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

+尝试这种方式

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();

nameFunction（）{}和nameFunction（）=＆gt;之间的区别ECMA6中的{}

2 个答案: