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


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

Стрелочные функции ECMAScript 6 решают две проблемы: более короткий синтаксис функций и лексическое значение this. Про this мы еще поговорим, а пока сравните синтаксис лямбд в JavaScript и других языках программирования:

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

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

Но и это еще не все. Если функция принимает только один аргумент, от круглых скобок тоже можно избавиться. Та-дам:

Если аргумент один, то круглые скобки необязательны, а вот если их несколько или ни одного — то скобки все же нужны.

Тело функции может иметь краткую или блочную форму. В блочной форме необходимо явно возвращать результат:

Ни в краткой, ни в блочной форме нельзя переносить стрелку на новую строку:

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

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

Лексическое значение this

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

Допустим у нас есть вот такой код на ES5:

Здесь у нас функция User, которая эмулирует класс, два поля у этого класса: имя и список ролей пользователя, и метод прототипа getRoles. В этом методе мы проходимся map’ом по массиву ролей и возвращаем новый массив из элементов «имя + роль».

В этот код закралась не очевидная ошибка. Если мы вызовем метод getRoles, то увидим, что имя пользователя отсутствует. А все потому, что значение this во внутренней функции уже не объект user, а глобальный объект window. А в строгом режиме вообще undefined, и этот код в строгом режиме не будет работать вовсе.

Как эта проблема решалась в ES5? Самый простой способ — сохранить ссылку на this во внутреннюю переменную.

Второй способ — использовать функцию bind, чтобы явно задать значение this:

Наконец, некоторые методы массивов, такие как map, принимают второй необязательный аргумент — значение this.

Стрелочные функции же решают эту проблему элегантно:

А теперь перепишем наш пример, используя классы и шаблонный литерал и вообще красота:

Кроме this, стрелочные функции не имеют своего массива arguments, а также значений super и new.target.

Когда следует использовать стрелочные функции? Как мы могли убедиться в предыдущем примере, они очень удобны при работе с массивами в таких методах как map, reduce или filter.

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

А когда стрелочные функции не следует использовать? Во-первых, в качестве функций обратного вызова с динамическим контекстом, например в обработчиках событий клика:

В обычной функции значение this связывается с элементом, по которому произошел клик, а в стрелочной функции значением this будет объект window.

Также стрелочные функции не следует применять в качестве методов объекта или методов прототипа:

И последнее, конечно, дело вкуса, но излишне короткий синтаксис не всегда способствует удобочитаемости.

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

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

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

На первый взгляд может показаться, что стрелочные функции являются исключительно “синтаксическим сахаром” и не несут в себе никакой новой функциональности. Действительно, их использование выглядит очень удобным и значительно соркащает объемы необходимого кода, особенно если вы сторонник функционального JavaScript:

Чтобы разобраться с новой синтаксической конструкцией, рассмотрим простую функцию add , которая возвращает сумму двух переданных ей аргументов:

Создание стрелочной функции состоит из имени add , передаваемых ей параметров (a, b) и тела функции a + b .

Объявление

Все стрелочные функции создаются с помощью function expression, то есть они всегда будут эквиваленты следующему ES5 коду:

Поэтому следует помнить, что перед использованием стрелочной функции её всегда необходимо создать заранее.

Параметры

Обычно параметры помещаются в круглые скобки (a, b) . Если необходимо передать функции всего один параметр, то круглые скобки можно не использовать var f = x => x * 2 , но лучше подобную возможность не использовать и всегда окружать параметр скобками var f = (x) => x * 2 , чтобы избежать недопонимания. В случае, если в параметрах нет необходимости, объявление функции будет выглядеть следующим образом:

Тело функции

В случае, когда необходимо выполнить всего одну инструкцию (как во всех примерах, рассмотренных выше) достаточно просто указать эту инструкцию, как тело функции:

В ситуациях, когда одной инструкции оказывается недостаточно, тело функции необходимо заключить в фигурные скобки < . >и пользовать ключевым словом return :

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

Анонимные функции

Чаще всего анонимные стрелочные функции используются при итерациях по элементам массивов с методами map , forEach , reduce , filter и другими:

this больше не проблема

Главная причина появления стрелочных функций в ES6 — недопонимание, которое возникает у большинства разработчиков при работе с ключевым словом this . Чтобы понять, что же такого чудесного принесли с собой стрелочные функции рассмотрим простой пример:

Чтобы выполнить какой-либо метод из объекта до появления стрелочных функций, необходимо было воспользоваться одним из методов замены ключевого слова this : как в этом примере записать его в переменную self , или воспользоваться методом функций bind . Данные способы, несмоненно, работали, но выглядели достаточно скверно и могли смутить других разработчиков, которые попытались бы разобраться в коде. Стрелочные функции полностью решают данную проблему. Теперь код, приведённый выше, будет выглядеть следующим образом:

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

Frontender Magazine

ES6 в деталях — это цикл статей о новых возможностях языка программирования JavaScript, появившихся в 6 редакции стандарта ECMAScript, кратко — ES6.

Стрелки были частью JavaScript с самого начала. Первые учебники по JavaScript советовали оборачивать встроенные скрипты в комментарии HTML. Это не позволяло тем браузерам, что не поддерживали JS, ошибочно отображать код JS как текст. В то время вы бы писали примерно так:

Старые браузеры видели два неподдерживаемых тега и комментарий, и только новые браузеры видели в этом JS.

Чтобы поддерживать этот костыль, движок JavaScript в браузере рассматривает символы как начало однострочного комментария. Кроме шуток. Это действительно всё время было частью языка и работает по сей день, не только сразу после открывающего тега , но и вообще в любом месте JS-кода. Даже в Node.js работает.

Последовательность символов в виде стрелки также обозначает однострочный комментарий. Интересно, что в HTML комментарием считаются символы перед , а в JS комментарий — это всё, что после и до конца строки.

А вот что ещё интересней. Эта стрелка обозначает комментарий только если находится в начале строки. Потому, что в других контекстах в JS — оператор «стремится к»!

Этот код действительно работает. Цикл выполняется, пока n не достигнет 0 . Это тоже не новая возможность ES6, а комбинация старых в новом контексте и небольшой фокус с записью операторов. Сможете разобраться, как это работает? Как обычно, разгадку можно найти на Stack Overflow.

Разумеется, есть ещё оператор «меньше или равно», . Возможно, вы сможете, как в игре Поиск Предметов, отыскать в исходном коде программ написанных на JavaScript и другие виды стрелок, но давайте на этом остановимся, как бы вы не искали, одной стрелки всё равно не хватает.

однострочный комментарий
оператор «стремится к»
меньше или равно
=> .

Что за => ? Сейчас разберемся.

Но сначала немного о функциях.

Функции-выражения повсюду

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

Например, предположим, вы хотите сказать браузеру, что ему следует делать, если пользователь нажмёт определённую кнопку. Вы начинаете печатать:

Метод .click() jQuery принимает один аргумент — функцию. Без проблем. Вы можете впечатать функцию прямо туда:

Мы уже привыкли писать так, это для нас уже вполне естественно. И странно вспоминать, что до того как, благодаря JavaScript, такой подход к программированию стал популярен, во многих языках не было такой возможности. Само собой, в Lisp были функции-выражения, они же лямбда-функции, ещё с 1958. Но C++, Python, C# и Java просуществовали годы без них.

Но теперь этому пришёл конец. Во всех четырёх теперь есть лямбды. Во всех более новых языках есть вcтроенная поддержка лямбд. Мы должны поблагодарить за это JavaScript — и ранних JavaScript-программистов, которые бесстрашно создавали сильно зависящие от лямбд библиотеки и тем самым привели к повсеместному принятию этой функциональности.

Хотя немного жаль, что из всех упомянутых языков в JavaScript синтаксис лямбд оказался самым многословным.

Новая стрела в ваш колчан

В ES6 появился новый синтаксис функций.

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

(Лично я очень благодарен за этот синтаксис. Для меня очень важно, что печатать function больше не надо, потому что у меня постоянно вместо этого получается functoin , и мне приходится возвращаться и исправлять опечатку.)

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

Мне кажется, выглядит очень неплохо.

Стрелочные функции точно так же великолепно работают с функциональными утилитами из библиотек наподобие Underscore.js и Immutable. В сущности, все примеры кода в документации Immutable написаны на ES6, так что многие из них уже используют стрелочные функции.

А что насчёт не столь функциональных случаев? Стрелочные функции могут содержать блок инструкций вместо одиночного выражения. Вернёмся к более раннему примеру:

Вот так это будет выглядеть в ES6:

Небольшое улучшение. Эффект при использовании промисов может быть более заметным из-за нагроможения строчек >).then(function (result) < .

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

Есть ещё один нюанс, когда стрелочные функции используются для создания объектов. Всегда оборачивайте объект в скобки:

Увы, пустой объект <> и пустой блок <> выглядят абсолютно одинаково. Правила ES6 гласят: < сразу после стрелки всегда трактуется как начало блока и никогда не считается началом объекта. Поэтому код puppy =><> молча интерпретируется как стрелочная функция, которая ничего не делает и возвращает undefined .

Ещё больше сбивает с толку то, что литерал вроде выглядит в точности как блок, содержащий инструкцию с меткой; по крайней мере, он так выглядит для движка JavaScript. К счастью, < — это единственный неоднозначный символ, так что единственный приём, который вам следует запомнить,— это оборачивание литералов объектов в скобки.

Что такое this ?

Есть одно хитрое отличие в поведении обычных функций- function и стрелочных функций. У стрелочных функций нет собственного значения this . Внутри стрелочной функции this всегда наследуется из окружающего лексического окружения.

Топ-пост этого месяца:  Запрос не обрабатывается

Перед тем как мы постараемся выяснить, что это значит на практике, давайте ненадолго обратимся к основам.

Как в JavaScript работает this ? Откуда берётся это значение? На этот вопрос нет короткого ответа. Если для вашего мозга это просто — это лишь из-за того, что вы с этим долго работали!

Одна из причин, почему этот вопрос всплывает так часто — это то, что функции- function получают значение this автоматически, неважно, нужно оно им или нет. Вы когда-нибудь применяли такой приём?

Здесь вам бы хотелось написать внутреннюю функцию просто как this.add(piece) . К несчастью, внутренняя функция не наследует this внешней. Во внутренней функции this будет window или undefined . Временная переменная self нужна, чтобы протащить внешнее значение this во внутреннюю функцию. (Ещё один способ — использовать .bind(this) на внутренней функции. И оба эти способа особым изяществом не отличаются.)

В ES6 трюки с this по большей части не нужны, если вы придерживаетесь этих правил:

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

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

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

Что приятно, ES6 также предоставляет более краткий способ записи методов в литералах объектов! Так что код выше можно сделать ещё проще:

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

Есть ещё одна небольшая разница между стрелочными и не-стрелочными функциями: стрелочные функции не получают собственного объекта arguments . Разумеется, в ES6 вы и так скорее предпочтёте остаточные параметры или значения по умолчанию.

Пронзаем стрелами тёмное сердце информатики

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

В 1936 Алонзо Чёрч и Алан Тьюринг независимо друг от друга разработали мощные математические вычислительные модели. Тьюринг назвал свою модель а-машины, но остальные немедленно окрестили их машинами Тьюринга. Чёрч, напротив, писал о функциях. Его модель называлась λ-исчисление. (λ — это строчная греческая буква лямбда.) Его работа послужила причиной тому, что в Lisp для обозначений функций использовалось слово LAMBDA , и поэтому наши дни мы называем функции-выражения лямбдами.

Но что такое λ-исчисление? И что имеется в виду под вычислительной моделью?

Непросто объяснить это в двух словах, но я попробую: λ-исчисление — это один из первых языков программирования. Оно не было спроектировано как язык программирования (в конце концов, до компьютеров, хранящих программу в памяти, было на тот момент лет десять или двадцать), а скорее, это было бесцеремонно простой, обнажённой, чисто математической идеей языка, который мог бы выразить любой вид вычислений, какой только захочется. Чёрчу нужна была эта модель, чтобы доказать свои мысли о вычислении в целом.

И он обнаружил, что в его модели нужно только одно — функции.

Только представьте, насколько необычайно это заявление! Без объектов, без массивов, без чисел, без инструкций if , циклов while , точек с запятыми, присваиваний, логических операторов или событийных циклов, возможно с нуля при помощи одних лишь функций воплотить любой вид вычислений, какой только возможен в JavaScript.

Например, вот такую «программу» могут написать математики в λ-нотации Чёрча:

Эквивалентная функция JavaScript выглядит так:

То есть JavaScript содержит работающую реализацию λ-исчисления. λ-исчисление есть в JavaScript.

Истории о том, как Алонзо Чёрч и поздние исследователи развивали λ-исчисление, и о том, как оно незаметно проникло в практически все заметные языки программирования, находятся уже за пределами тематики этой статьи. Но если вы заинтересовались основателями информатики или хотели бы взглянуть на то, как в языке, в котором нет ничего, кроме функций, можно делать вещи вроде циклов и рекурсии, то вы могли бы в какой-нибудь пасмурный день почитать про нотацию Чёрча и комбинаторы неподвижной точки и поиграться с ними в консоли Firefox или Scratchpad. Со стрелочными функциями и другими его сильными сторонами, JavaScript можно с уверенностью назвать лучшим языком для ознакомления с λ-исчислением.

Когда я смогу пользоваться стрелками?

Стрелочные функции из ES6 были реализованы в Firefox мной ещё в 2013. Ян де Мойж (Jan de Mooij) сделал их быстрыми. Спасибо Тоору Фуджисава (Tooru Fujisawa) и ziyunfei за патчи.

Стрелочные функции также реализованы в предварительной версии Microsoft Edge. Они также доступны в Babel, Traceur и TypeScript, если вы хотите начать использовать их в вебе прямо сейчас.

Нашей следующей темой будет одна из странных особенностей ES6. Мы увидим, что typeof x возвращает совершенно новое значение. Мы зададимся вопросом: когда имя не является строкой? Мы переосмыслим понятие равенства. Это будет необычно. Так что присоединяйтесь на следующей неделе, и мы рассмотрим символы ES6 в деталях.

О ключевом слове «this» языка JavaScript: особенности использования с пояснениями

Тайна this

Долгое время ключевое слово this оставалось для меня загадкой. Это мощный инструмент, но разобраться в нём нелегко.

С точки зрения Java, PHP или любого другого обычного языка this расценивается как экземпляр текущего объекта в методе класса, не больше и не меньше. Чаще всего его нельзя использовать вне метода, и этот подход не вызывает непонимания.

В JavaScript this — это текущий контекст исполнения функции. Поскольку функцию можно вызвать четырьмя способами:

  • вызов функции: alert(‘Hello World!’) ,
  • вызов метода: console.log(‘Hello World!’) ,
  • вызов конструктора: new RegExp(‘\\d’) ,
  • непрямой вызов: alert.call(undefined, ‘Hello World!’) ,

и каждый из них определяет свой контекст, поведение this слегка не соответствует ожиданиям начинающих разработчиков. Кроме того, strict mode также влияет на контекст исполнения.

Ключом к пониманию ключевого слова this является осознание принципов вызова функции и его влияния на контекст. В этой статье рассказывается про вызовы функций, влияние вызовов на this и типичные ловушки при идентификации контекста.

8–9 ноября, Москва, 12 600–151 200 ₽

Прежде чем мы начнём, давайте познакомимся с несколькими терминами:

  • Вызов — это исполнение кода тела функции. Например, вызовом функции parseInt будет parseInt(’15’) .
  • Контекстом вызова является значение this в теле функции.
  • Область видимости функции — это набор переменных, объектов и функций, к которым можно получить доступ из тела функции.

Содержание:

  1. Тайна this
  2. Вызов функции
    2.1. this при вызове функции
    2.2. this при вызове функции в strict mode
    2.3. Ловушка: this во внутренней функции
  3. Вызов метода
    3.1. this при вызове метода
    3.2. Ловушка: отделение метода от его объекта
  4. Вызов конструктора
    4.1. this при вызове конструктора
    4.2. Ловушка: как не забыть про new
  5. Непрямой вызов
    5.1. this при непрямом вызове
  6. Связанная функция
    6.1. this в связанной функции
  7. Стрелочная функция
    7.1. this в стрелочной функции
    7.2. Ловушка: определение метода стрелочной функцией
  8. Заключение

Вызов функции

Вызов функции совершается, когда за выражением, являющимся объектом функции, следуют открывающая скобка ( , разделённый запятыми список аргументов и закрывающая скобка ) , например, parseInt(’18’) . Выражение не может быть аксессором myObject.myFunction , который совершает вызов метода. Например, [1,5].join(‘,’) — это вызов не функции, а метода.

Простой пример вызова функции:

hello(‘World’) — это вызов функции: hello расценивается как объект функции, за которым в скобках следует аргумент ‘World’ .

Это тоже вызов функции: первая пара скобок (function(name) <. >) расценивается как объект функции, за которым в скобках следует аргумент: (‘World’) .

this при вызове функции

this — это глобальный объект при вызове функции

Глобальный объект определяется средой исполнения. В веб-браузере это объект window .

В вызове функции контекстом исполнения является глобальный объект. Давайте проверим контекст следующей функции:

Когда вызывается sum(15, 16) , JavaScript автоматически инициализирует this как глобальный объект, являющийся window в браузере.

Когда this используется вне области видимости какой-либо функции (самая внешняя область видимости: контекст глобального исполнения), он также относится к глобальному объекту:

this при вызове функции в strict mode

this принимает значение undefined при вызове функции в strict mode

Strict mode был введён в ECMAScript 5.1 и представляет собой более надёжную систему защиты и проверки ошибок. Для активации поместите директиву ‘use strict’ вверху тела функции. Этот режим влияет на контекст исполнения, заставляя this быть undefined . Контекст исполнения перестаёт быть глобальным объектом, в отличие от предыдущего случая.

Пример функции, запущенной в strict mode:

Когда multiply(2, 5) вызывается this становится undefined .

Strict mode активен не только в текущей области видимости, но и во всех вложенных:

‘use strict’ вставлена вверху тела execute , что активирует strict mode внутри её области видимости. Поскольку concat объявлена внутри области видимости execute , она наследует strict mode. И вызов concat(‘Hello’, ‘ World!’) приводит к тому, что this становится undefined .

Один файл JavaScript может содержать как «строгие», так и «нестрогие» функции. Поэтому возможно иметь в одном скрипте разные контексты исполнения для одного типа вызова:

Ловушка: this во внутренней функции

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

Вообще-то контекст внутренней функции зависит только от вызова, а не от контекста внешней функции.

Чтобы получить ожидаемый this , модифицируйте контекст внутренней функции при помощи непрямого вызова (используя .call() или .apply() , об этом позже) или создайте связанную функцию (используя .bind() , об этом тоже поговорим позже).

Следующий пример вычисляет сумму двух чисел:

numbers.sum() — это вызов метода объекта, поэтому контекстом sum является объект numbers . Функция calculate определена внутри sum , поэтому вы можете ожидать, что this — это объект numbers и в calculate() . Тем не менее, calculate() — это вызов функции, а не метода, и поэтому его this — это глобальный объект window или undefined в strict mode. Даже если контекстом внешней функции sum является объект numbers , у него здесь нет власти.

Результатом вызова numbers.sum() является NaN или ошибка TypeError: Cannot read property ‘numberA’ of undefined в strict mode. Точно не ожидаемый результат 5 + 10 = 15 , а всё потому, что calculate вызвана некорректно.

Для решения проблемы функция calculate должна быть исполнена в том же контексте, что и метод sum , чтобы получить доступ к значениям numberA и numberB . Это можно сделать при помощи метода .call() :

calculate.call(this) исполняет функцию calculate , но дополнительно модифицирует контекст в соответствии с первым параметром. Теперь this.numberA + this.numberB эквивалентно numbers.numberA + numbers.numberB и функция возвращает ожидаемый результат 5 + 10 = 15 .

Вызов метода

Метод — это функция, хранящаяся в объекте. Пример:

helloFunction — это метод в myObject . Для доступа к методу нужно использовать аксессор: myObject.helloFunction .

Вызов метода совершается, когда за выражением в виде аксессора, расценивающемся как объект функции, следует пара скобок и разделенный запятыми список аргументов между ними.

В прошлом примере myObject.helloFunction() — это вызов метода helloFunction объекта myObject . Также вызовами метода являются: [1, 2].join(‘,’) или /\s/.test(‘beautiful world’) .

Важно отличать вызов функции от вызова метода. Главным отличием является то, что для вызова метода необходим аксессор ( .functionProperty() или [‘functionProperty’]() ), а для вызова функции — нет ( () ).

this при вызове метода

this — это объект, которому принадлежит метод

При вызове метода, принадлежащего объекту, this становится этим объектом.

Давайте создадим объект, метод которого увеличивает число на 1:

Вызов calc.increment() сделает контекстом функции increment объект calc . Поэтому можно спокойно использовать this.num .

Объект JavaScript наследует метод своего прототипа. Когда вызывается метод, унаследованный от объекта, контекстом всё равно является сам объект:

Object.create() создаёт новый объект myDog и создаёт прототип. Объект myDog наследует метод sayName . Когда исполняется myDog.sayName() , myDog является контекстом исполнения.

В синтаксисе ECMAScript 6 class контекст вызова метода — тоже сам объект:

Ловушка: отделение метода от его объекта

Метод объекта можно переместить в отдельную переменную. При вызове метода с использованием этой переменной вы можете подумать, что this — это объект, в котором определён метод.

На самом деле, если метод вызван без объекта, происходит вызов функции, и this становится глобальным объектом window или undefined . Создание связанной функции исправляет контекст — им становится объект, в котором содержится метод.

Следующий пример создаёт конструктор Animal и его экземпляр — myCat . Затем через 1 секунду setTimeout() логирует информацию об объекте myCat :

Топ-пост этого месяца:  Как включить MySQL параметры

Вы можете подумать, что setTimeout вызовет myCat.logInfo() , которая запишет информацию об объекте myCat . Но метод отделяется от объекта, когда передаётся в качестве параметра: setTimout(myCat.logInfo) , и через секунду происходит вызов функции. Когда logInfo вызывается как функция, this становится глобальным объектом или undefined (но не объектом myCat ), поэтому информация об объекте выводится некорректно.

Функцию можно связать с объектом, используя метод .bind() . Если отделённый метод связан с объектом myCat , проблема контекста решается:

myCat.logInfo.bind(myCat) возвращает новую функцию, исполняемую в точности как logInfo , но this которой остаётся myCat даже в случае вызова функции.

Вызов конструктора

Вызов конструктора совершается, когда за ключевым словом new следует выражение, расцениваемое как объект функции, и пара скобок с разделённым запятыми списком аргументов. Пример: new RegExp(‘\\d’) .

В этом примере объявляется функция Country , которая затем вызывается в качестве конструктора:

new Country(‘France’, false) — это вызов конструктора функции Country . Результатом исполнения является новые объект, чьё поле name равняется ‘France’ .

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

Начиная с ECMAScript 6, JavaScript позволяет определять конструкторы ключевым словом class :

new City(‘Paris’) — это вызов конструктора. Инициализация объекта управляется специальным методом класса: constructor , this которого является только что созданным объектом.

Вызов конструктора создаёт новый пустой объект, наследующий свойства от прототипа конструктора. Ролью функции-конструктора является инициализация объекта. Как вы уже знаете, контекст этого типа вызова называется экземпляром. Это — тема следующей главы.

Когда перед аксессором myObject.myFunction идёт ключевое слово new , JavaScript совершит вызов конструктора, а не метода. Возьмём в качестве примера new myObject.myFunction() : сперва при помощи аксессора extractedFunction = myObject.myFunction функция извлекается, а затем вызывается как конструктор для создания нового объекта: new extractedFunction() .

this в вызове конструктора


this — это только что созданный объект

Контекстом вызова конструктора является только что созданный объект. Он используется для инициализации объекта данными из аргументом функции-конструктора.

Давайте проверим контекст в следующем примере:

new Foo() делает вызов конструктора с контекстом fooInstance . Объект инициализируется внутри Foo : this.property задаётся значением по умолчанию.

Тоже самое происходит при использовании class , только инициализация происходит в методе constructor :

Когда исполняется new Bar() , JavaScript создаёт пустой объект и делает его контекстом метода constructor . Теперь вы можете добавлять свойства, используя this : this.property = ‘Default Value’ .

Ловушка: как не забыть про new

Некоторые функции JavaScript создают экземпляры при вызове не только в качестве конструктора, но и функции. Например, RegExp :

При исполнении new RegExp(‘\\w+’) и RegExp(‘\\w+’) JavaScript создаёт эквивалентные объекты регулярных выражений.

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

Следующий пример иллюстрирует проблему:

Vehicle — это функция, задающая свойства type и wheelsCount объекту-контексту. При исполнении Vehicle(‘Car’, 4) возвращается объект car , обладающий корректными свойствами: car.type равен ‘Car’ а car.wheelsCount — 4 . Легко подумать, что всё работает как надо.

Тем не менее, this — это объект window при вызове функции, и Vehicle(‘Car’, 4) задаёт свойства объекта window — упс, что-то пошло не так. Новый объект не создан.

Обязательно используйте оператор new , когда ожидается вызов конструктора:

new Vehicle(‘Car’, 4) работает верно: новый объект создан и инициализирован, поскольку присутствует слово new .

В вызове функции добавлена верификация: this instanceof Vehicle , чтобы убедиться, что у контекста исполнения верный тип объекта. Если this — не Vehicle , генерируется ошибка. Таким образом, если исполняется Vehicle(‘Broken Car’, 3) (без new ), то выбрасывается исключение: Error: Incorrect invocation .

Непрямой вызов

Непрямой вызов производится, когда функция вызывается методами .call() или .apply() .

Функции в JavaScript — объекты первого класса, то есть функция — это объект типа Function .

Из списка методов этой функции два, .call() и .apply() , используются для вызова функции с настраиваемым контекстом:

  • Метод .call(thisArg[, arg1[, arg2[, . ]]]) принимает в качестве первого аргумента thisArg контекст вызова, а список аргументов arg1, arg2, . передаётся вызываемой функции.
  • Метод .apply(thisArg, [args]) принимает в качестве первого аргумента thisArg контекст вызова, а array-like объект [args] передаётся вызываемой функции в качестве аргумента.

Следующий пример демонстрирует непрямой вызов:

increment.call() и increment.apply() оба вызывают функцию-инкремент с аргументом 10 .

Главным отличием между ними является то, что .call() принимает список аргументов, например, myFunction.call(thisValue, ‘value1’, ‘value2’) , а .apply() принимает эти значения в виде array-like объекта: myFunction.apply(thisValue, [‘value1’, ‘value2’]) .

this при непрямом вызове

this — это первый аргумент .call() или .apply()

Очевидно, что при непрямом вызове this — значение, передаваемое .call() или .apply() в качестве первого аргумента. Пример:

Непрямой вызов может пригодиться, когда функцию нужно вызвать в особом контексте, например, решить проблему при вызове функции, где this — всегда window или undefined . Его также можно использовать для симуляции вызова метода объекта.

Ещё одним примером использования является создание иерархии классов в ES5 для вызова родительского конструктора:

Runner.call(this, name) в Rabbit создаёт непрямой вызов родительской функции для инициализации объекта.

Связанная функция

Связанная функция — это функция, связанная с объектом. Обычно она создаётся из обычной функции при помощи метода .bind() . У двух функций совпадают тела и области видимости, но различаются контексты.

Метод .bind(thisArg[, arg1[, arg2[, . ]]]) принимает в качестве первого аргумента thisArg контекст вызова связанной функции, а необязательный список аргументов arg1, arg2, . передаётся вызываемой функции. Он возвращает новую функцию, связанную с thisArg .

Следующий код создаёт связанную функцию и вызывает её:

multiply.bind(2) возвращает новый объект функции double , который связан с числом 2 . Код и область видимости у multiply и double совпадают.

В отличие от методов .apply() и .call() , сразу вызывающих функцию, метод .bind() возвращает новую функцию, которую впоследствии нужно будет вызвать с уже заданным this .

this в связанной функции

Ролью .bind() является создание новой функции, чей вызов будет иметь контекст, заданный в первом аргументе .bind() . Это — мощный инструмент, позволяющий создавать функции с заранее определённым значением this .

Давайте посмотрим, как настроить this связанной функции:

numbers.getNumbers.bind(numbers) возвращает функцию boundGetNumbers , которая связана с объектом numbers . Затем boundGetNumbers() вызывается с this , равным numbers , и возвращает корректный объект.

Функцию numbers.getNumbers можно извлечь в переменную simpleGetNumbers и без связывания. При дальнейшем вызове функции simpleGetNumbers() задаёт this как window или undefined , а не numbers . В этом случае simpleGetNumbers() не вернет корректное значение.

.bind() создаёт перманентную контекстную ссылку и хранит её. Связанная функция не может изменить контекст, используя .call() или .apply() с другим контекстом — даже повторное связывание не даст эффекта.

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

В следующем примере сперва объявляется связанная функция, а затем производится попытка изменить контекст:

Только new one() изменяет контекст связанной функции, в остальных типах вызова this всегда равен 1 .

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

Стрелочная функция нужна для более короткой формы объявления функции и лексического связывания контекста.

Её можно использовать следующим образом:

Стрелочные функции используют облегчённый синтаксис, убирая ключевое слово function . Можно даже опустить return , когда у функции есть лишь одно выражение.

Стрелочная функция анонимна анонимна, что означает, что её свойство name — пустая строка » . Таким образом, у неё нет лексического имени, которое нужно для рекурсии и управления хэндлерами.

Кроме того, она не предоставляет объект arguments , в отличие от обычной функции. Тем не менее, это можно исправить, используя rest-параметры ES6:

this в стрелочной функции

this — это контекст, в котором определена стрелочная функция

Стрелочная функция не создаёт свой контекст исполнения, а заимствует this из внешней функции, в которой она определена.

Следующий пример показывает прозрачность контекста:

setTimeout вызывает стрелочную функцию в том же контексте (метод myPoint ), что и метод log() . Как мы видим, стрелочная функция «наследует» контекст той функции, в которой определена.

Если попробовать использовать в этом примере обычную функцию, она создаст свой контекст ( window или undefined ). Поэтому для того, чтобы код работал корректно, нужно вручную привязать контекст: setTimeout(function() <. >.bind(this)) . Это громоздко, поэтому проще использовать стрелочную функцию.

Если стрелочная функция определена вне всех функций, её контекст — глобальный объект:

Стрелочная функция связывается с лексическим контекстом раз и навсегда. this нельзя изменить даже при помощи метод смены контекста:

Функция, вызываемая непрямым образом с использованием .call(numbers) , задаёт this значение numbers . Стрелочная функция get также получает numbers в качестве this , поскольку принимает контекст лексически. Неважно, как вызывается get , её контекстом всегда будет numbers . Непрямой вызов с другим контекстом (используя .call() или .apply() ), повторное связывание (с использованием .bind() ) не принесут эффекта.

Стрелочную функцию нельзя использовать в качестве конструктора. Если вызвать new get() , JavaScript выбросит ошибку: TypeError: get is not a constructor .

Ловушка: определение метода стрелочной функцией

Вы можете захотеть использовать стрелочную функцию для объявления метода. Справедливо: их объявления гораздо короче по сравнению с обычным выражением: (param) => <. >вместо function(param) <..>.

В этом примере демонстрируется определение метода format() класса Period с использованием стрелочной функции:

Так как format — стрелочная функция, определённая в глобальном контексте, её this — это объект window . Даже если format исполняется в качестве метода объекта walkPeriod.format() , window остаётся контекстом вызова. Так происходит, потому что стрелочная функция имеет статический контекст, не изменяемый другими типами вызовов.

this — это window , поэтому this.hours и this.minutes становятся undefined . Метод возвращает строку ‘undefined hours and undefined minutes’ , что не является желаемым результатом.

Функциональное выражение решает проблему, поскольку обычная функция изменяет свой контекст в зависимости от вызова:

walkPeriod.format() — это вызов метода с контекстом walkPeriod . this.hours принимает значение 2 , а this.minutes — 30 , поэтому метод возвращает корректный результат: ‘2 hours and 30 minutes’ .

Заключение

Поскольку вызов функции имеет наибольшее влияние на this , отныне не спрашивайте:

а спрашивайте:

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

Каков this там, где объявлена стрелочная функция?

Такой подход к this убережет вас от лишней головной боли.

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

Всем привет! В этой статье мы рассмотрим, что такое стрелочные функции в ES6 и как их использовать.

Стрелочные функции – это функции, которые записываются при помощи оператора «стрелка»(=>).

Давайте сразу рассмотрим пример:

let add = (x, y) => x + y;
console.log(add(5, 2));

В результате выполнения данной функции в консоли мы увидим число 7.

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

var add = function add(x, y) <
return x + y;
>;

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

let square = x => x*x;

Такая функция принимает только один аргумент и возводит переданное число в квадрат.

Функция без параметров:

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

let multiply = (x, y) => <
let result = x*y;
return result;
>;

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

Самовызывающаяся функция выглядит следующим образом:

Если вам что-то не понятно, то советую обратить внимание на видеокурс JavaScript, jQuery и Ajax с Нуля до Гуру.

А у меня на этом все. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Топ-пост этого месяца:  Методология БЭМ верстки. Теория и практический пример

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Как использовать стрелочные функции в объектах?

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

    2 ответа 2

    Стрелочные функции привязаны к значению this . Так что всё как обычно. Но они анонимные, поэтому метод сделать не получится, если вы об этом.

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

    getName() работает как надо. А при вызове getArrowName() , this будет ссылаться не на obj , а на окружающее лексическое окружение.

    Их очень удобно использовать для функций-колбэков:

    Так же, возможно вам будет интересная «короткая запись методов» (It’s shorthand method names), которая как и стрелочные функции, появилась в ES6, и которая ничем не отличается по смыслу от обычных методов.

    # 1 ES6 — Стрелочные функции

    В этой серии мы познакомимся с фичами ecmascript 2015 или, как его называют, ecmascript 6. Соответственно es5 это обычный javascript, синтаксис который поддерживается везде. ecmascript 6 это более новый стандарт javascript, который лаконичнее, проще в использовании и большинство новых проектов люди пишут уже с новым стандартом.

    В этом уроке мы познакомимся с стрелочными функциями из ес6. Итак как они выглядят и чем отличаются от старых обычных функций?

    Давайте напишем обычную функцию getTrack, которая возращает исполнителя и название трека.

    Если мы посмотрим в браузер, у нас вывелось Artist Track. Теперь давайте напишем эту же функцию с помощью стрелок.

    Как мы видим, практически все у нас осталось без изменений. Единственное отличие, что мы убрали слово function, а теперь мы пишем вместо него стрелку с другой стороны. Код стал выглядеть лаконичнее и его проще читать.

    Но мы можем упросить его этот код, сделав его однострочным

    Это можно делать, когда у вас только одна операция. Тогда можно убрать return и написать то, что будет возвращать функция без скобок.

    Если же у нас была бы функция только с одним параметром, то код можно было бы упростить еще больше.

    В этом случая мы убрали еще и скобки вокруг аргументов, так как они нужно только если у нас 2 и больше аргументов.

    Единственный нюанс — это не забыть как будет выглядеть функция без параметров.

    Круглые скобки должны быть обязательно.

    Это не единственные плюсы стрелочных функций. Они также не имеют своего контекста. В ес5 мы часто писали вот такой код.

    Здесь у нас есть класс API, написанный на прототипах и в методе get мы хотим вернуть map функцию, внутри которой нам нужен this.url. This там будет неправильный. В нашем случае он undefined, так как мы используем webpack, который не дает нам доступа к window, а если вы выполните этот код напрямую в браузере например, то this будет window.

    Для того, чтобы this был правильный обычно либо писали .bind(this)

    либо создавали локальную переменную

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

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

    Как мы видим, все работает как и до этого, но код стал лаконичнее.

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

    В es6 это можно сделать с помощью оператора spread. Как аргумент функции он возвращает все оставшиеся аргументы. Если он указан один, то он вернет все аргументы, как раньше возвращала arguments. Выглядит это так

    О нем мы поговорим подробнее в следующих уроках.

    В этом уроке мы с вами познакомились с стрелочными функциями, узнали чем они лучше функций из es5 и увидели насколько чище и лаконичнее получается код.

    Если у вас возникли какие-то вопросы, пишите их прямо под этим видео.

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

    Стрелочные функции, которые появились в стандарте ES6 (ECMAScript 6), призваны упростить написание кода и облегчить жизнь JavaScript-программисту. Они позволяют значительно сократить запись функции и по другому работают с контекстом в плане использования ключевого слова this .

    Синтаксис стрелочной функции в JavaScript

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

    Ни в краткой, ни в блочной форме нельзя переносить стрелку на новую строку.

    Давайте рассмотрим различные примеры стрелочных функций. Будем это делать, используя синтаксис, привычный в ES5 и ранее, а затем — его аналог в виде стрелочной функции ES6.

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

    В примере вы вызовете эти функции при клике на соответствующей кнопке.

    Если посмотреть на синтаксис стрелочной функции по сравнению с привычной нам, то можно увидеть, что они похожи, особенно если сравнивать синтаксис function expression . Нужно просто убрать ключевое слово function и фигурные скобки, а также добавить после круглых скобок оператор => , благодаря которому функции в ES6 и получили название стрелочных. Сразу оговорюсь, что удаление фигурных скобок работает только для функций с одной строкой кода.

    Немного модифицируем вывод сообщения. Теперь мы будем отображать некую строку в

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

    ES6. Стрелочные функции в javascript

    Данная статья не направлена на то, чтобы сказать, когда и как их использовать. Я только попытаюсь объяснить новый синтаксис для тех, кто видит его в первый раз. Будете вы его использовать или нет, — не важно, но рано или поздно вы все равно столкнетесь с ним где-нибудь. Так что лучше понимать механику этого нового синтаксиса.

    Вот небольшой пример:

    Приведенный выше код можно записать так:

    Или, в данном случае, еще короче:

    Второй пример использует < . >фигурные скобки, но, поскольку, в нем всего одна строка кода, фигурные скобки могут быть опущены и возврат подразумевается сам собой, как видно из третьего примера.

    Один параметр

    Когда стрелочная функция имеет один параметр, скобки можно опустить:

    Но, если нет никаких параметров, вы должны использовать открывающую и закрывающую скобки:

    Функции обратного вызова

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

    Существует несколько вариаций этого «_this» (например, «self» или «that»), но идея та же. В функциях обратного вызова нам нужен доступ к версии внешней области видимости, но идея та же. В функциях обратного вызова нам нужен доступ к версии внешней области видимости this , которая теперь отличается от предыдущей, поскольку мы говорим о функции обратного вызова.

    С помощью стрелочных функций, мы получаем «block scope» (блочную область видимости) и «this», которые являются одним и тем же «this» в обоих случаях. Это означает, что код сверху можно переписать без _this = this :

    «Обертка»

    Давайте представим ситуацию, как в React, где событие onClick должно вызывать doSomething() , (), но также должно передавать аргументы в doSomething() (например ID). Этот пример на самом деле не работает:

    Код запустится, но технически он будет вызывать doSomething() сразу же при загрузке страницы. Чтобы решить эту проблему, некоторые разработчики ссылаются на функцию-обертку:

    Отсутствие круглой скобки в this.onClick означает, что это просто отсылка к функции, а не вызов ее.

    Функция onClick() теперь является чем-то вроде «обертки» для doSomething() . Со стрелочными функциями можно делать «обертки» такого типа:

    Как альтернативу, — мы могли бы также использовать .bind() , который не требует никаких оберток (стрелочных функций и прочего):

    Браузерная поддрержка стрелочных функций

    Если вам нужна поддержка браузеров помимо последних версий Chrome и Firefox, воспользуйтесь Babel транспайлер, чтобы конвертировать написанный вами ES6-код в ES5.

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

    Стрелочные функции ECMAScript 6 решают две проблемы: более короткий синтаксис функций и лексическое значение this. Про this мы еще поговорим, а пока сравните синтаксис лямбд в JavaScript и других языках программирования:

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

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

    Но и это еще не все. Если функция принимает только один аргумент, от круглых скобок тоже можно избавиться. Та-дам:

    Если аргумент один, то круглые скобки необязательны, а вот если их несколько или ни одного — то скобки все же нужны.

    Тело функции может иметь краткую или блочную форму. В блочной форме необходимо явно возвращать результат:

    Ни в краткой, ни в блочной форме нельзя переносить стрелку на новую строку:

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

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

    Лексическое значение this

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

    Допустим у нас есть вот такой код на ES5:

    Здесь у нас функция User, которая эмулирует класс, два поля у этого класса: имя и список ролей пользователя, и метод прототипа getRoles. В этом методе мы проходимся map’ом по массиву ролей и возвращаем новый массив из элементов «имя + роль».

    В этот код закралась не очевидная ошибка. Если мы вызовем метод getRoles, то увидим, что имя пользователя отсутствует. А все потому, что значение this во внутренней функции уже не объект user, а глобальный объект window. А в строгом режиме вообще undefined, и этот код в строгом режиме не будет работать вовсе.

    Как эта проблема решалась в ES5? Самый простой способ — сохранить ссылку на this во внутреннюю переменную.

    Второй способ — использовать функцию bind, чтобы явно задать значение this:

    Наконец, некоторые методы массивов, такие как map, принимают второй необязательный аргумент — значение this.

    Стрелочные функции же решают эту проблему элегантно:

    А теперь перепишем наш пример, используя классы и шаблонный литерал и вообще красота:

    Кроме this, стрелочные функции не имеют своего массива arguments, а также значений super и new.target.

    Когда следует использовать стрелочные функции? Как мы могли убедиться в предыдущем примере, они очень удобны при работе с массивами в таких методах как map, reduce или filter.

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

    А когда стрелочные функции не следует использовать? Во-первых, в качестве функций обратного вызова с динамическим контекстом, например в обработчиках событий клика:

    В обычной функции значение this связывается с элементом, по которому произошел клик, а в стрелочной функции значением this будет объект window.

    Также стрелочные функции не следует применять в качестве методов объекта или методов прототипа:

    И последнее, конечно, дело вкуса, но излишне короткий синтаксис не всегда способствует удобочитаемости.

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

    Нашли опечатку? Orphus: Ctrl+Enter

    © getinstance.info Все права защищены. 2014–2020

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

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