5 отличий между обычными и стрелочными функциями

Наши соц. сети: instagram, fb, tg

В JS ты можешь инициализировать функцию несколькими способами.

Обычно - это вариант с использованием ключевого слова function

Объявление функции и функциональное выражения я буду именовать как обыкновенная функция.

Второй путь, стал доступен в ES2015 - это стрелочный синтаксис:

Итак, встает хороший вопрос, если у нас есть два варианта создания функции, то какой когда лучше выбрать? 🤔

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

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

Динамический контекст означает, что значение this зависит от того как была вызвана функция. В JS существует 4е способа как ты можешь вызвать функцию.Во время обычного выполнения значение this эквивалентно глобальному объекту:

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

Косвенный вызов используя myFunc.call(thisVal, arg1, ..., argN) или myFunc.apply(thisVal, [arg1, ..., argN]), значение this эквивалентно первому аргументу:

Вызов с помощью конструктора используя ключевое слово new, значение this эквивалентно новосозданной сущности:

Поведение this внутри стрелочной функции отличается от поведения this внутри обычной функции.Не имеет значения как она была вызвана, значение this внутри стрелочной функции всегда эквивалентно значения this внешней функции. Другими словами функция не создает собственный контекст исполнения, она использует внешний.В примере выше, myMethod() это внешняя функция для стрелочной функции callback():

значение this внутри стрелочной функции callback() эквивалентно значению this внешней функции myMethod().Это одна из самых крутых фишек стрелочных функций. Когда ты используешь колбек внутри метода, ты можешь быть уверен, что стрелочная функция не создаст собственный this: больше не нужны обходные пути типа const self = this или callback.bind(this).Даже если ты попытаешься вызвать стрелочную функцию через myArrowFunc.call(this) или myArrowFunc.apply(this), то ничего не изменится, у неё все так же будет this = внешнему this.

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

Например, Car() функция создаст объект автомобиля:

Car - это обыкновенная функция и когда мы её вызывем с помощью ключевого слова new, она создает новый объект типа Car.

Как следствие того, что стрелочные функции не имеют собственного this они не могут быть использованы для создания объектов.Если ты попытаешься вызвать стрелочную функцию с использованием ключевого слова new, JS кинет исключение:

Вызов new Car('red'), где Car это стрелочная функция, будет сгенерирована ошибка TypeError: Car is not a constructor.

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

массив arguments будет содержать аргументы: 'a' и 'b'.

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

Давай попробуем:

Стрелочная функция myArrowFunction() вызывается с аргументами 'c' , 'd'. Но до сих пор, внутри тела функции, arguments такой же точно, как в функцииmy RegularFunction().

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

Параметр ...args собирает все аргументы преданные при вызове стрелочной функции: { 0: 'c', 1: 'd' }.

Только использование выражения return возвращает результат выполнения функции:

Если return отсутствует внутри стрелочной функции, или после return нет выражения, функция вернет undefined:

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

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

Функция increment() содержит только одну инструкцию: num + 1. Это выражения неявно возвращается стрелочной функцией без использования ключевого слова return.

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

В классе Hero ниже, метод logName() создан с использованием синтаксиса обычной функции:

Иногда тебе будет нужно применить метод в качестве колбека, например для setTimeout() или для event listener`а. В таких случаях, ты можешь столкнуться с проблемой при попытке получить доступ к this.Например, давай попробуем использовать logName() метод как колбек для setTimeout():

По истечению 1 секунды ты увидишь в консоли undefined.setTimeout() выполняет обычный вызов функции logName (где this это глобальный объект). В данном случае метод отделен от объекта.

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

batman.logName.bind(batman) привязывает this к оъекту batman. Теперь ты можешь убедиться, что контекст не потерян.Привязка this вручную необходимое зло😈 Но есть выход, ты можешь использовать стрелочные функции.

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

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

Давай попробуем:

Сейчас ты можешь использовать batman.logName без какой-либо привязки this. Значение this внутри метода logName() всегда объект класса:

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

Значение this внутри обыкновенной функции динамически зависит от контекста вызова. Собственный this внутри стрелочной функции отсутствует и она ссылается на this внешней функции. Массив arguments внутри обыкновенной функции содержит список аргументов функции. Стрелочная функция, не имеет массива arguments (но ты можешь использовать деструктуризацию, для иммитации аналога ...args).Если в стрелочной функции содержится одна инструкция, то ты можешь использовать неявный return, даже без использования ключевого слова return. Последнее в списке, но не по важности - ты можешь использовать синтаксис стрелочных функций для внутри класса. При этом в качестве this будет выступать объект класса.

Уверен, что тебе было полезно, читай ещё больше статей в нашем блоге💪