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

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

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

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

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

function funcName(params) {
 return params + 2;
 }
funcName(2);
// 4

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

var funcName = (params) => params + 2
funcName(2);
// 4

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

(parameters) => { statements }

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
() => { statements }

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

parameters => { statements }

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

parameters => expression
// эквивалент:
function (parameters){
  return expression;
}

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

var double = num => num * 2

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

double(2);
// 4
double(3);
// 6

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

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

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

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

function Counter() {
  this.num = 0;
}
var a = new Counter();

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

console.log(a.num);
// 0

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

function Counter() {
  this.num = 0;
  this.timer = setInterval(function add() {
 this.num++;
 console.log(this.num);
  }, 1000);
}

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
var b = new Counter();
// NaN
// NaN
// NaN
// ...

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

clearInterval(b.timer);

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

function Counter() {
  this.num = 0;
this.timer = setInterval(function add() {
 console.log(this);
  }, 1000);
}
var b = new Counter();

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

clearInterval(b.timer);

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

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

function Counter() {
  this.num = 0;
  this.timer = setInterval(() => {
 this.num++;
 console.log(this.num);
  }, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

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

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

clearInterval(b.timer);

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

function Counter() {
  var that = this;
this.timer = setInterval(() => {
 console.log(this === that);
  }, 1000);
}
var b = new Counter();
// true
// true
// ...

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

clearInterval(b.timer);

Заключение

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

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

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

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

Автор: Brandon Morelli

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

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree