Функция стрелки в JavaScript

Что такое стрелочная функция? Как написать стрелочную функцию?

Есть несколько способов написать функцию на JavaScript, тогда как в случае с большинством языков у нас есть один или два способа написания функций, но в случае JavaScript это четыре (только пока! Не будет пяти или нет). Все эти мелкие достоинства делают JavaScript таким универсальным и приятным.
Стрелочная функция была первой в ES6. ES6 - это аббревиатура от EcmaScript 6, второй крупной версии JavaScript, появившейся в 2015 году. Помимо функции стрелки, было введено несколько других удобных функций, таких как классы JavaScript, обещание, тип символа и т. Д.
Перед тем, как получить в стрелочную функцию JavaScript, давайте рассмотрим классический способ написания функции на JS:

Классическая функция начинается с ключевого слова function со списком параметров в круглых скобках и всем телом функции, заключенным в фигурные скобки. Давайте посмотрим на классическую факториальную функцию:

Классическая функция cfactorial вычисляет факториал числа. Результатом будет:

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

Функция стрелки не имеет ключевого слова function, иногда она может выглядеть как переменные javaScript, но ключевое отличие заключается в том, что оператор стрелки (=>) в функции стрелки. Посмотрим в коде:

Функция afactorial такая же, как функция cfactorial, но реализована с использованием концепции функции стрелки. Обратите внимание, как удаляется ключевое слово функции, поместите оператор стрелки (=>) после списка параметров. Тело функции заключено в фигурные скобки. Вы не поверите, но этот тип синтаксиса действительно полезен при написании сложных функций обратного вызова.

Хотя стрелочная функция - мощная функция JavaScript, в ней отсутствуют некоторые важные возможности, например:

1. Стрелочную функцию нельзя использовать как конструктор или какой-либо метод класса.
2. С ключевым словом this стрелочные функции дают другие результаты, чем this в обычных функциях. В классической функции ключевое слово this указывает на объект, который вызывает функцию. Скажем, окно, кнопка или объект JavaScript вызывает обычную функцию, тогда this будет представлять окно, кнопку или этот объект JS, в зависимости от того, что вызывает функцию. Но в случае стрелочной функции this нацеливание на объект, который фактически определяет стрелочную функцию. Посмотрим в коде:

Давайте создадим вспомогательную функцию, которая создаст две кнопки под тегом <div id="show">, и добавим функции displayThisInClassical() и displayThisInArrow() с этими двумя кнопками.

Результат здесь:

«Кнопка 1», которая вызывает функцию displayThisInClassical(), показывает, что this связывается с текущим объектом, то есть с кнопкой. Но в случае «кнопки 2», которая вызывает функцию стрелки displayThisInArrow(), не может связываться с this, поэтому this представляет родительский объект (window), который фактически определяет функцию стрелки.

Здесь можно найти весь код: