Начало работы с современным JavaScript – стрелочные функции

От автора: одна из самых популярных новых функций в ECMAScript 2015 – стрелочные функции. Это так благодаря новому более чистому синтаксису или совместному использованию их с родительской областью? Возможно по обеим причинам. Давайте разберемся с ними подробнее.

Первым фактором, повлиявшим на внедрение стрелочных функций, был более короткий синтаксис функции. Синтаксис может немного отличаться в зависимости от функции. Рассмотрим несколько вариантов! Вот функция, написанная в синтаксисе ES5:

А вот то же самое в виде стрелочной функции:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Как мы видим, стрелочная функция делает код намного более кратким, когда у нас есть однострочные выражения. Из-за неявного возврата мы можем опустить фигурные скобки и ключевое слово return. Если у нас есть несколько строк в функции, мы всегда должны использовать фигурные скобки и return:

Скобки необязательны, если присутствует только один параметр:

Стрелочные функции иногда называют функциями жирных стрелок из-за того, что маркер => похож на жирную стрелку.

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

Здесь это действительно полезно!

This

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

В глобальной области значением this всегда является объект window.

Обычные функции

Функции имеют свой собственный контекст выполнения, а вместе с ним и свой собственный this. Понять эти концепции непросто, но они важны.

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

Если мы запустим этот код, то получим в консоли undefined, потому что функция внутри setTimeout имеет свой собственный контекст выполнения. Таким образом, мы не получим this.age в функции Age, но это будет в одной из внутренних функций, где мы делаем вызов. И это не придало значения age.

Чтобы получить доступ к контексту родительской функции, разработчики часто переназначают внешнюю функцию this на переменную, обычно называемую that или self.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Таким образом, мы можем получить доступ к родительской функции this, но вы можете видеть, как это сбивает с толку.

Другой вариант — использовать function{}.bind(this).

Стрелочные функции

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

Итак, мы видим, как стрелочные функции помогают сделать код более понятным и легко читаемым.

Должны ли мы всегда использовать стрелочные функции?

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

Методы

Стрелочные функции лучше всего подходят для функций без методов. Посмотрим, что произойдет, когда мы попытаемся использовать их как методы. В этом примере мы создаем объект blog с помощью метода like.

Казалось бы, каждый раз, когда мы вызываем атрибут blog.like(), blog.like увеличивается на единицу. Однако, к сожалению, ценность like останется нулевой.

На этот раз родительской областью является объект window, а не объект blog блога. Таким образом, при вызове метода like() будет предпринята попытка увеличить свойство объекта окна like.

Если вместо этого мы воспользуемся традиционным синтаксисом, он будет работать так, как ожидалось:

Еще одна новая функция в ES6 — это сокращенный синтаксис метода:

Обратите внимание, что мы можем опустить ключевое слово function и двоеточие.

Конструктор

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

Вместо этого мы можем использовать выражение функции:

Заключение

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

Автор: Michael Karén

Источник: indepth.dev

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.