Существуют дополнительные различия между этими двумя вариантами, кроме синтаксиса. Как и почти в каждом современном языке программирования, в JavaScript предоставляются способы создания функций для обеспечения повторного использования кода. Для тех, кто не знаком с языком, существует два различных способа объявления функции в JavaScript.
Изначально использовалось ключевое слово function, а позднее был создан синтаксис стрелки. Несмотря на различия в доступности области видимости, оба ключевых слова function и синтаксис стрелки создают схожие результаты.
Невозможность различения между ними может вызвать проблемы и привести к неправильному использованию. Для современного разработчика JavaScript необходимо понимать, как каждое объявление функции влияет на область видимости и видимость.
Что такое стрелочные функции JavaScript? Стрелочные функции JavaScript - это альтернативный способ определения функций, который не использует стандартное ключевое слово function:
function logMessage(message) {
console.log(message);
}
Выше вы можете видеть тот же самый код, записанный тремя разными способами. Первый использует стандартный способ объявления функции. Следующие два демонстрируют два способа использования стрелочных функций ES6.
Синтаксис стрелочных функций был впервые внедрен в JavaScript с выпуском стандартов ECMAScript 2015. Стрелочные функции предложили чистый и лаконичный способ быстрого создания функций и интересное решение для ряда долгосрочных проблем с областью видимости в JavaScript.
Эти особенности быстро сделали стрелочные функции популярными среди многих разработчиков. Взглянув на современный код на JavaScript, разработчик так же часто встретит стрелочные функции, как и обычные функции.
В чем различие между стрелочными функциями и обычными функциями в JavaScript? На первый взгляд стрелочные функции кажутся не сильно отличающимися от функций, объявленных с использованием ключевого слова function. Помимо синтаксиса, обе инкапсулируют переиспользуемый набор действий, которые можно вызывать из другого места в коде.
Несмотря на сходство между ними, однако, существуют различия, о которых разработчикам следует знать.
Различия в области видимости Когда обычная функция объявляется в JavaScript, эта функция действует как замыкание, создающее свою собственную область видимости. Это может вызвать проблемы при использовании некоторых специализированных функций, таких как setTimeout и setInterval.
До ES6 существовало значительное количество обходных путей, которые поднимали элементы на более высокие уровни области видимости для использования в обратных вызовах. Эти хаки работали, но их было часто сложно понять, и они могли вызвать проблемы с перезаписью некоторых переменных.
Стрелочные функции решают обе проблемы простым и элегантным способом. Когда стрелочная функция используется в качестве части обратного вызова, она имеет доступ к той же области видимости, что и функция, из которой ее вызвали.
Это позволяет использовать функции в качестве обратных вызовов без потери доступа к контексту, в котором было вызвано первоначальное событие. Как простой тест для демонстрации этого принципа, можно создать отложенную функцию отправки сообщений, подобную следующей:
function delayedMessage(message, delay) {
setTimeout(function(message) {
console.log(message);
}, delay);
}
delayedMessage("Hello World", 1000);
Функция проста, принимает сообщение и задержку в миллисекундах. После прохождения задержки она должна записать сообщение в консоль. Однако при выполнении кода вместо переданного сообщения в консоль будет записано undefined.
При выполнении обратного вызова функции меняется область видимости, и оригинальное сообщение больше не доступно. Использование сообщения внутри замыкания требует, чтобы сообщение было поднято в глобальную переменную, что может привести к его перезаписи до обратного вызова.
Стрелочная функция - это правильное решение этой проблемы. Если заменить первый аргумент для setTimeout, область видимости можно сохранить, и функция получит доступ к сообщению, переданному delayedMessage.
function delayedMessage(message, delay) {
setTimeout(() => {
console.log(message);
}, delay);
}
delayedMessage("Hello World", 1000);
Теперь, при выполнении функции delayedMessage, будет записано сообщение. Кроме того, это позволяет назначить несколько сообщений с разными задержками, и все они все равно будут происходить в правильное время.
Это связано с тем, что каждый раз, когда используется delayedMessage, создается своя область собственной копии внутренней стрелочной функции.
Читаемость кода Хотя стрелочные функции полезны в качестве обратных вызовов, они также используются для того, чтобы делать код чистым и лаконичным. В предыдущем разделе вы видели, что использование стрелочной функции позволяет легко понять, что произойдет, когда вызывается функция delayedMessage.
По мере усложнения функций небольшая ясность может сделать код более читаемым. При создании объектов это может упростить код при добавлении коротких функций:
class counter {
_count = 0;
increment = () => {
this._count += 1;
}
decrement = () => {
this._count -= 1;
}
count = () => {
return this._count;
}
}Роль в объектно-ориентированном программировании Хотя стрелочные функции JavaScript являются неотъемлемой частью функционального программирования, они также имеют свое место в объектно-ориентированном программировании. Стрелочные функции могут использоваться внутри объявлений классов:
class orderLineItem {
_LineItemID = 0;
_Product = {};
_Qty = 1;
this._Qty = newQty;
}
}
Использование стрелочной функции для объявления методов внутри объявления класса не изменяет поведение функции в пределах класса. Однако вне класса она действительно раскрывает функцию, позволяя ей использоваться другими классами.
Обычные функции не могут быть доступны вне объявления класса без вызова. Это означает, что, хотя другие объявления классов могут наследовать эти функции, они не могут быть использованы напрямую для создания других классов.
Когда следует использовать стрелочные функции JavaScript? Стрелочные функции JavaScript - это невероятно мощная функция, которая предоставляет разработчикам гораздо больший контроль над тем, какая область видимости у функции. Знание того, когда обратному вызову следует иметь доступ к области видимости его родителя, а когда нет, может помочь разработчику определить, какой тип объявления следует использовать.
Стрелочные функции дают программистам четкий и лаконичный способ написания обратных вызовов, не раскрывая части области видимости, которые следует скрыть. Они также позволяют создавать чистые и простые композиции, дополнительно усиливая функциональное программирование в JavaScript.
Разработчики на JavaScript должны знать различия между двумя синтаксисами и тщательно выбирать, какой синтаксис подходит при объявлении своих функций.
Добавить комментарий