Разница между nameFunction() {} и nameFunction() => {} в ECMA6

Я начинаю изучать синтаксис 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?

Ответ 1

Из трех возможных вариантов в ES5 поддерживается только первая. Остальные два являются дополнениями в ES6.

Третий вариант - это ярлык ES6 для первого варианта, и поэтому они работают одинаково в ES6.

Когда вы используете синтаксис стрелки, как во втором, this НЕ установлен как хост-объект, так как он находится в первом и третьем. Эта одна из особенностей синтаксиса стрелки и, следовательно, ее не следует использовать, если вы ожидаете, что this будет установлен на объект-хост. Вместо этого this будет установлен в лексический контекст, из которого был определен код, который часто упоминается как "значение this в охватывающем контексте" или "лексическое значение этого", которое в вашем случае было бы любым this был, когда первоначально был объявлен объект-хост, который, по-видимому, был undefined.

Здесь хорошая справочная статья о функциях стрелок: ES6 В глубине: функции стрелок

Ответ 2

Объектные методы, у которых есть метод someMethod. В этом случае этот представляет собой ссылку на объект методы.
Объект методы, который имеет свойство someMethod, в котором хранится некоторая анонимная функция. В этой функции этот есть undefined, потому что функция анонимна.
Объектные методы имеют внутреннюю функцию 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();