ES6 Функции стрелок, также известные как Толстые стрелки, являются одной из более простых новых функций ES6. У них есть два преимущества: более сжатый синтаксис и лексическая область видимости this. Давайте сначала посмотрим на синтаксис.
Синтаксис стрелочной функции
Стрелочные функции обеспечивают более простой и лаконичный способ определения функций. В качестве примера возьмем следующую функцию обратного вызова:
Это большой объем кода для очень простой задачи. Давайте перепишем эту функцию, заменив анонимный обратный вызов стрелочной функцией:
Как видно из приведенного выше примера, стрелочные функции используют = › для объявления функции. В этом примере показано одно из лучших применений стрелочных функций - анонимных обратных вызовов. Нам больше не нужно записывать ключевое слово function при объявлении анонимной функции.
Давайте посмотрим на другой пример. Возьмем следующую функцию:
Вот как мы могли бы его переписать, используя стрелочные функции:
В этом примере подчеркивается важный момент, касающийся возврата из стрелочных функций. Чтобы понять этот момент, нам нужно понять разницу между «выражениями» и «утверждениями». По сути, «выражение» создает значение, а «оператор» выполняет действие. В приведенном выше примере x + y - это выражение, создающее значение. Поэтому, если стрелочная функция содержит одно выражение, подобное приведенному выше, выражение возвращается автоматически. Однако, если функция включает несколько выражений или операторов, нам необходимо включить фигурные скобки ({}) и явно вызвать return для значения, которое мы хотим вернуть.
Давайте посмотрим, как написать стрелочную функцию только с одним параметром:
Как видите, если у нас есть только один параметр, мы можем опустить круглые скобки.
Давайте быстро рассмотрим различные способы написания стрелочных функций:
Теперь давайте посмотрим, как функции стрелок влияют на ключевое слово this.
Лексический охват этого
В контексте functions и this лексическая область видимости в основном означает, что функция получает значение this из окружающего кода (фактическое определение намного сложнее и включает в себя то, как движок JavaScript компилирует код во время выполнения).
Обычные функции получают свое значение this из контекста, в котором они вызываются. Это означает, что если мы хотим получить доступ к ключевому слову this из контекста, в котором функция была определена, нам придется привязать this к функцию с помощью метода .bind (this).
Стрелочные функции получают свое значение this из контекста, в котором они определены. Это нельзя связать с функцией стрелки.
Не волнуйтесь, если в этом нет особого смысла, это, вероятно, просто означает, что вам еще не приходилось иметь дело с лексической областью видимости. Но если у вас возникнут проблемы с использованием this, или вы увидите код, использующий метод .bind (this), или вы увидите var that = this то вполне вероятно, что у вас возникнут проблемы с определением области действия this. В этом случае использование функций стрелок может решить ваши проблемы.
Таким образом, использование функций стрелок может помочь нам написать более чистый и лаконичный код. Надеюсь, эта статья также помогла вам понять, как функции стрелок работают с ключевым словом this.
Я люблю использовать стрелочные функции. Но помните, что не каждую функцию можно или нужно записать как стрелочную функцию. Примером этого является объявление методов для объекта, которое мы рассмотрим в следующей статье.
