В чем разница между стрелочной функцией и обычной функцией

Question

В чем разница между стрелочной функцией и обычной функцией

Тип вопроса: JavaScript Вероятность: 29% Категория: Frontend Разработчик

Ответ

Контекст (this)
У обычной функции this динамический (зависит от вызова), у стрелочной — лексический (берется из внешней области).

    const obj = {
      name: 'Test',
      regular: function() { console.log(this.name) }, // 'Test'
      arrow: () => console.log(this.name) // undefined (если не strict mode — window)
    };

arguments
Обычная функция имеет псевдомассив arguments, стрелочная — нет.
Использование с new
Обычную можно вызывать как конструктор (new Func()), стрелочную — нельзя.
Синтаксис
Стрелочные функции короче, особенно для однострочных выражений:

    const sum = (a, b) => a + b; // return не нужен

Привязка super/prototype
У стрелочных нет prototype, они не подходят для методов класса, где нужен super.

Когда использовать:

Стрелочные — для колбэков, сохранения контекста.
Обычные — методы объектов/классов, конструкторы, функции с arguments.

Ответ 18+ 🔞

А, слушай, вот тебе разбор про функции, но чтобы не уснуть, как на лекции про гвозди. Тут, блядь, целых пять пунктов, но главное — не перепутай, а то потом охуеешь от багов.

1. Контекст, этот ёбнутый this Представь: обычная функция — это проститутка, которая с каждым новым клиентом (call, apply, просто вызов) меняет своё «я». А стрелочная — монашка, которая дала обет и this у неё раз и навсегда из внешнего мира.

const obj = {
  name: 'Test',
  regular: function() { console.log(this.name) }, // Скажет 'Test', потому что её вызвали как метод
  arrow: () => console.log(this.name) // Молчит, как рыба об лёд, потому что её 'this' — это глобальный объект (window) или undefined в strict mode
};

2. arguments — старый псевдомассив Обычная функция, как бабушка, хранит всю хуйню, которую ей передали, в волшебной переменной arguments. Стрелочная — молодое поколение, ей похуй, у неё такого нет. Используй rest-оператор (...args), если надо.

3. Конструкторство Хочешь создать объект через new? Обычная функция скажет «давай, я готова». Стрелочная посмотрит на тебя, как на идиота, и выдаст ошибку — у неё нет внутреннего метода [[Construct]], ёпта. Нельзя из монашки сделать завод.

4. Синтаксис, чтоб его Стрелочные — это для ленивых (в хорошем смысле). Однострочник — и всё, return сам подразумевается.

const sum = (a, b) => a + b; // Красота, а? Ничего лишнего.

5. super и prototype — для взрослых Хочешь использовать super в классе или чтобы у функции было свойство prototype? Забудь про стрелочные. У них этого добра нет. Они для простых действий, а не для высоких материй наследования.

Итог, блядь, когда что брать:

Стрелочная — твой выбор, когда пишешь колбэк (например, в setTimeout или map), и нужно, чтобы this не сбежал, как ушлый кот. Или когда пишешь короткую анонимную функцию — просто, быстро, без лишнего кода.
Обычная — когда делаешь метод объекта или класса, когда тебе жизненно нужен arguments, или когда собираешься городить конструктор. Всё, что посерьёзнее.

Запомни эту разницу, а то будешь потом, как Герасим, кричать «Муму!», а тебе в ответ — undefined.