Arrow функции ⇒ лучшее новшество ES6 на сегодняшний день. Это действительно мощное дополнение к ES6, которое я использую постоянно.

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

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

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

1. У них нет this

   Они используют «лексическое связывание», чтобы определить, каково значение «this». Проще говоря, лексическое связывание использует «this» из тела функции.

2. У них нет arguments

   Стрелочные функции не имеют объекта arguments. Однако ту же функциональность можно достичь с помощью параметров rest.

   let sum = (...args) => args.reduce((x, y) => x + y, 0);
   sum(3, 3, 1) // вывод: 7
   

3. Их нельзя использовать с new

   Стрелочные функции не могут быть конструкторами, поскольку у них нет свойства prototype.

Когда использовать стрелочные функции, а когда нет:

1. Не используйте для добавления функции как свойства в литерал объекта, потому что мы не можем получить доступ к this.
2. Функциональные выражения лучше подходят для методов объекта. Стрелочные функции лучше использовать для обратных вызовов или методов, таких как map, reduce или forEach.
3. Используйте функциональные объявления для функций, которые вы будете вызывать по имени (поскольку они подняты).
4. Используйте стрелочные функции для обратных вызовов (поскольку они, как правило, короче).

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

Стрелочные функции НЕЛЬЗЯ использовать как конструкторы

Кратко:

Это связано с тем, как стрелочные функции обрабатывают ключевое слово this. JavaScript выбросит ошибку, если вы попытаетесь вызвать стрелочную функцию как "конструктор". Для решения этой проблемы используйте обычные функции.

Подробное объяснение:

Поскольку конструкторы объектов зависят от ключевого слова this, которое может изменяться.

В общем случае, this всегда ссылается на глобальный объект (в браузере это объект window).

НО, когда вы делаете что-то вроде этого:

function personCreator(name) {
   this.name = name;
}

const person1 = new personCreator('John');

Ключевое слово new делает свою магию, и this внутри personCreator становится пустым объектом, а не ссылается на глобальный объект. После этого создается новое свойство name внутри этого пустого объекта this, и его значение будет 'John'. В конце, возвращается объект this.

Как мы видим, ключевое слово new изменило значение this с глобального объекта на пустой объект .

Стрелочные функции не позволяют изменять свой объект this. Их this всегда ссылается на область, в которой они были статически созданы. Это называется статическая лексическая область. Вот почему вы не можете использовать методы bind, apply или call со стрелочными функциями. Итак, их this "заперт" на значение this той области, в которой они были созданы. Это сделано специально.

По этой причине стрелочные функции не могут использоваться как "конструкторы".

Примечание:

Лексическая область — это просто область, в которой функция была создана. Например:

function personCreator(name) {
    this.name = name;

    const foo = () => {
        const bar = () => {
            console.log(this); // Вывод: { name: 'John' }
        }

        console.log(this); // Вывод: { name: 'John' }
    
        bar();
    }

    foo();
}

const person1 = new personCreator('John');

Лексическая область bar — это всё, что находится внутри foo. Таким образом, значение this у bar такое же, как у foo, то есть соответствует значению this у personCreator.