Классические функции (объявленные через ключевое слово `function`) и стрелочные функции (введённые в ES6 через `=>` синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий:

1. Синтаксис
Классическая функция:

function add(a, b) {
  return a + b;
}

Стрелочная функция:

const add = (a, b) => a + b;

Предлагают более краткий синтаксис для написания функций, особенно если функция состоит из одного выражения.

2. Контекст `this`
В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст `this`), где функция была объявлена.

Пример с классической функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(function() {
      console.log(this.id); // `this` ссылается на глобальный объект или undefined в строгом режиме, а не на obj
    }, 1000);
  }
};

Пример со стрелочной функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(() => {
      console.log(this.id); // `this` корректно ссылается на obj, так как стрелочная функция наследует `this` из окружения
    }, 1000);
  }
};

3. Конструктор
Классические функции могут использоваться с помощью ключевого слова `new`. Стрелочные функции не могут быть использованы как конструкторы, и попытка это сделать приведет к ошибке.

Пример с классической функцией:

function Person(name) {
  this.name = name;
}
const person = new Person("Alice");

Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {
  this.name = name;
};
// const person = new Person("Alice"); // Ошибка: Person не является конструктором

4. Аргументы
В классических функциях можно использовать объект `arguments`, который содержит аргументы, переданные функции. В стрелочных функциях нет объекта `arguments`, но можно использовать оператор расширения `...` для достижения аналогичного результата.

Основные различия между классическими и стрелочными функциями заключаются в синтаксисе, поведении `this`, использовании в качестве конструктора и доступе к аргументам функции. Стрелочные функции предлагают более краткий синтаксис и удобны для написания коротких функций, а также при работе с контекстом `this` в обратных вызовах и замыканиях. Однако для более сложных сценариев, требующих использования `this` в различных контекстах или создания конструкторов, предпочтительнее использовать классические функции.

Feb. 22, 2024, easyoffer