JavaScript: стрелочные функции для начинающих

JavaScript: стрелочные функции для начинающих

От автора: на той неделе я опубликовал пост по ключевому слову this для начинающих. В той статье я не рассказал про стрелочные функции. Тема просто слишком большая для того поста, поэтому мы разберем ее в этой статье. Читайте ниже, и вы узнаете об основах стрелочных функций!.

Преимущество №1: короче синтаксис

Давайте взглянем на стандартную функцию:

Код выше можно переделать в стрелочную функцию по одной из двух причин: синтаксис станет короче. Точно такую же функцию можно выразить через стрелку в одну строку:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

Если параметров нет, стрелочная функция выглядит так:

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

Если возвращается выражение, фигурные скобки удаляются:

Ну, синтаксис вы выучили. А что насчет примера? Откройте консоль Chrome (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J) и введите следующий код:

Как видите, мы приравниваем переменную double стрелочной функции. Функция принимает один параметр num. Так как параметр один, круглые скобки мы не указываем. Так как мы возвращаем значение num*2, то фигурные скобки вокруг выражения мы опускаем. Давайте выполним функцию и посмотрим результат:

Преимущество №2: нет привязки к this

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

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

На примере будет проще. Давайте создадим в консоли конструктор и создадим его экземпляр:

Из прошлой статьи вы должны были запомнить, что this в конструкторе ограничивается новым объектом. В нашем случае это объект a. Вот почему мы можем сделать console.log для a.num и получить 0.

А что если значение a.num нужно увеличивать каждую секунду? Для этого можно воспользоваться функцией setInterval().setInterval() – функция, вызывающая другую функцию по истечении заданных миллисекунд. Давайте добавим ее в функцию Counter.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Код такой же, как и раньше, только мы добавили переменную this.timer и приравняли ее setInterval. Код будет запускаться каждые 1000 миллисекунд (1 секунда). this.num увеличивается на 1 и логируется в консоль. Давайте запустим ее. Создайте в консоли экземпляр Counter:

Как видите, функция логирует каждую секунду, но результат не такой, как мы ожидали. В лог попадает Nan (не число). Что же не так? Во-первых, остановим интервал с помощью:

Давайте вернемся. Наша функция setInterval не вызывается в объявленном объекте. Она также не вызывается с помощью ключевого слова new (только Counter()). И последнее, мы не используем call, bind и apply. setInterval – обычная функция. По факту значение this в setIntervalis ограничивается глобальным объектом! Проверим нашу теорию с помощью логирования this:

Как видите каждую секунду логируется объект window. Очистите интервал:

Вернемся к изначальной функции. Она логировала NaN, потому что this.num отсылало к свойству num объекта window (window.num, которое не существует), а не к объекту b (b.num), который мы создали.

Как это исправить? С помощью стрелочной функции! Нам нужна функция без связи с this. В стрелочной функции this сохраняет привязку к оригинальному контексту. Заменим в Counter функцию setInterval на стрелочную.

Консоль начала логировать увеличивающееся число, заработало! Сохраняется изначальная привязка this конструктора Counter. Внутри setInterval this ограничено нашим новым объектом b!

Очистите интервал:

Для подтверждения работы концепции можно логировать this изнутри стрелочной функции. Создадим переменную that в функции Counter. Будем выводить в логи true, если значение this в setInterval равно значению this (that) в родительской функции Counter:

Как и ожидалось, в логи постоянно попадает true! Опять чистим интервал:

Заключение

Надеюсь, эта статья помогла вам увидеть два главных преимущества стрелочных функций:

короче синтаксис;

нет привязки к this.

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

Автор: Brandon Morelli

Источник: https://hackernoon.com/

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Курс по Webpack. Основы

Прямо сейчас посмотрите курс по Webpack!

Смотреть курс

Метки:

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree