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

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

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

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

Что такое стрелочные функции JavaScript?

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

функцияlogMessage(сообщение) {
консоль.лог (сообщение);
}
константа логСообщение = (сообщение) => {
консоль.лог (сообщение);
}
константа логСообщение = сообщение =>консоль.лог (сообщение);
instagram viewer

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

JavaScript впервые принял синтаксис стрелочных функций с выпуском стандартов ECMAScript 2015. Стрелочные функции предлагали чистый и лаконичный способ быстрого создания функций и интересное решение нескольких давних проблем с областью видимости в JavaScript.

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

Чем стрелочные функции отличаются от обычных функций в JavaScript?

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

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

Разница в области применения

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

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

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

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

функциязадержанное сообщение(сообщение, задержка) {

 установить время ожидания (функция(сообщение) {
консоль.лог (сообщение);
 }, задерживать);
}
задержанное сообщение ("Привет, мир", 1000);

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

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

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

функциязадержанное сообщение(сообщение, задержка) {

 установить время ожидания (() => {
консоль.лог (сообщение);
 }, задерживать);
}
задержанное сообщение ("Привет, мир", 1000);

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

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

Читаемость кода

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

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

сортприлавок{
 _счет = 0;
 приращение = () => {
этот._счетчик += 1;
 }
 уменьшение = () => {
этот._счет -= 1;
 }
 количество = () => {
возвращатьсяэтот._считать;
 }
}
позволять кт = новый прилавок();

Роль в объектно-ориентированном программировании

Хотя стрелочные функции JavaScript являются неотъемлемой частью функционального программирования, они также имеют место в объектно-ориентированного программирования. Стрелочные функции можно использовать в объявлениях классов:

сортзаказLineItem{
 _LineItemID = 0;
 _Продукт = {};
 _Количество = 1;
конструктор(продукт) {
этот._LineItemID = crypto.randomUUID();
этот._Продукт = продукт
 }
 изменитьКоличествоЭлементовЛинейки = (новыйкол-во) => {
этот._Количество = новоеКоличество;
 }
}

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

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

Когда следует использовать стрелочные функции JavaScript?

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

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

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