В чем разница (если таковая имеется) между различными объявлениями функций в объектах JavaScript?

Question

У меня есть объект JavaScript:

var methods = {

  classStyle() {
    console.log('Class style function');
  },

  traditionalStyle: function() {
    console.log('Traditional style function');
  },

  arrowStyle: () => {
    console.log('Arrow style function');
  }

};

methods.classStyle();
methods.traditionalStyle();
methods.arrowStyle();

Выходная информация соответствует ожидаемой:

(index):70 Class style function
(index):74 Traditional style function
(index):78 Arrow style function

Мои вопросы:

1. Есть ли какая-либо разница между этими разными методами объявления?
2. Это зависит от личных предпочтений? Или внутренняя работа меняется?
3. Есть ли какие-либо соображения, которые следует учитывать при использовании различных стилей?

Answer 1

arrowStyle отличается из-за различий в функциях стрелок.Ниже приведены различия в this:

var methods = {

  classStyle() {
    console.log('class this is', this);
  },

  traditionalStyle: function() {
    console.log('traditional this is', this);
  },

  arrowStyle: () => {
    console.log('arrow this is', this);
  }

};

methods.classStyle.call(5);
methods.traditionalStyle.call(5);
methods.arrowStyle.call(5);

Answer 2

Как дополнение, как уже упоминалось, первое и второе не совпадают. Одно из основных отличий заключается в том, где и как они доступны. Посмотрите этот фрагмент, вы увидите, что определения методов доступны при создании объекта, но не объявление функции.

Это означает, что когда вы определяете с традиционным стилем, вы не можете использовать его в другом месте объекта, он будет неопределенным. Класс стиля будет доступен, что является огромной разницей.

methods = {
  classStyle() {

    //console.log('class this is', this);
    return 'class';
  },

  traditionalStyle: function() {
    //console.log('traditional this is', this);
    return 'tradition';

  },

  arrowStyle: () => {
    console.log('arrow this is', this);
  },

  testFn() {
    console.log('class is', this.classStyle);
    console.log('traditionnal is', this.traditionnalStyle);
  },

  get classProp() {
    return this.classStyle();
  },

  get traditionnalProp() {
    return this.traditionnalStyle();
  }

};



methods.testFn();
console.log(methods.classProp);
console.log(methods.traditionnalProp);

Answer 3

«Функция стиля класса» (сокращенный метод) очень похожа на обычную функцию.Единственное отличие состоит в том, что он не может использоваться в качестве конструктора (то есть вызывается с new), и из-за этого он не имеет свойства prototype.Что касается функций стрелок, см. Функция стрелок против объявления / выражений функций: являются ли они эквивалентными / заменяемыми? .В двух словах, функции стрелок не связывают свои собственные this и arguments и не могут использоваться с new.

Это зависит от личных предпочтений?Или внутренняя работа меняется?

В ES6 + нет причин использовать традиционный синтаксис функции в объектах, потому что синтаксис сокращенных методов проще и безопаснее, потому что если вы случайно попытаетесь использовать метод какконструктор, вы получите ошибку.Что касается функций стрелок, вы можете использовать их, только если вам не нужен доступ к объекту с помощью this.