Съществуват допълнителни разлики между двете освен синтаксиса.
Като почти всеки модерен език за програмиране, JavaScript предлага начини за създаване на функции, позволяващи повторна употреба на кода. За тези, които не са запознати с езика, има два различни начина за деклариране на функция в JavaScript.
Първоначално, функция е използвана ключова дума и по-късно е създаден синтаксисът на стрелката. Въпреки че се различават по достъпност на обхвата, функционалната ключова дума и синтаксисът на стрелката създават подобни резултати.
Невъзможността да се прави разлика между двете може да причини проблеми и да доведе до неправилна употреба. За съвременния JS разработчик е необходимо да разбере как всяка декларация на функция влияе върху обхвата и видимостта.
Какво представляват функциите със стрелки на JavaScript?
Функции със стрелки на JavaScript са алтернативен начин за дефиниране на функции, които не използват по подразбиране функция ключова дума:
функцияlogMessage(съобщение) {
конзола.log (съобщение);
}конст logMessage = (съобщение) => {
конзола.log (съобщение);
}
конст logMessage = съобщение =>конзола.log (съобщение);
По-горе можете да видите едно и също съобщение, написано по три различни начина. Първият използва метода за деклариране на обикновена функция. Следващите две показват двата начина за използване на функциите със стрелки на ES6.
JavaScript за първи път прие синтаксиса на функцията стрелка с пускането на стандартите ECMAScript 2015. Функциите със стрелки предлагат изчистен и кратък начин за бързо създаване на функции и интересно решение на няколко дълготрайни проблема с обхвата в JavaScript.
Тези функции бързо превърнаха функциите със стрелки в хит сред много разработчици. Програмистите, които търсят модерна кодова база на JavaScript, са също толкова склонни да намерят функции със стрелки, колкото и обикновени функции.
По какво се различават функциите със стрелки от обикновените функции в JavaScript?
На пръв поглед функциите със стрелки не изглеждат много различни от функциите, декларирани чрез ключовата дума function. Извън синтаксиса и двата капсулират многократно използваем набор от действия, които могат да бъдат извикани от другаде в кода.
Въпреки приликите между двете обаче има някои разлики, които разработчиците трябва да знаят.
Разлика в обхвата
Всеки път, когато обикновена функция е декларирана в JavaScript, това функция работи като затваряне, което създава свой собствен обхват. Това може да причини проблем при използване на определени специализирани функции като setTimeout и setInterval.
Преди ES6 имаше значителен брой заобикалящи решения, които биха издигнали елементи до по-високи нива на обхват за използване при обратни извиквания. Тези хакове работеха, но често бяха трудни за разбиране и можеха да причинят проблеми с презаписването на определени променливи.
Функциите със стрелки решиха и двата проблема по прост и елегантен начин. Когато функция със стрелка се използва като част от обратно извикване, тя има достъп до същия обхват като функцията, от която е извикана.
Това позволява функциите да се използват като обратни извиквания, без да се губи достъп до контекста, в който е извикано оригиналното събитие. Като прост тест, за да покажете този принцип в действие, можете да настроите функция за забавени съобщения като тази по-долу:
функциязабавено съобщение(съобщение, забавяне) {
setTimeout(функция(съобщение) {
конзола.log (съобщение);
}, забавяне);}
delayedMessage("Здравей свят", 1000);
Функцията е проста, приемаща съобщение и забавяне за милисекунди. След като забавянето изтече, трябва да регистрира съобщението в конзолата. Въпреки това, когато кодът се изпълни, недефиниран ще бъде регистрирано в конзолата вместо съобщението, което е предадено.
Когато функцията за обратно извикване се изпълни, обхватът се променя и оригиналното съобщение вече не е достъпно. Използването на съобщението от затварянето изисква съобщението да бъде издигнато до глобална променлива, което може да доведе до презаписването му преди обратното извикване.
Функцията със стрелка е подходящо решение за този проблем. Ако замените първия аргумент за setTimeout, обхватът може да се поддържа и функцията ще има достъп до предаденото съобщение забавено съобщение.
функциязабавено съобщение(съобщение, забавяне) {
setTimeout(() => {
конзола.log (съобщение);
}, забавяне);}
delayedMessage("Здравей свят", 1000);
Сега, когато се изпълни, забавено съобщение функцията ще регистрира съобщението. Освен това, това позволява множество съобщения да бъдат поставени на опашка с различни закъснения и всички те пак ще се появят в точното време.
Това се дължи на факта, че всеки път забавено съобщение се използва, той генерира свой собствен обхват със собствено копие на функцията вътрешна стрелка.
Четливост на кода
Докато функциите със стрелки са полезни като обратни извиквания, те се използват и за поддържане на чист и кратък код. В горния раздел можете да видите, че използването на функция със стрелка прави лесно очевидно какво ще се случи, когато забавено съобщение се извиква функция.
Тъй като функциите стават по-сложни, наличието на малко яснота може да направи кода много по-четлив. Когато композирате обекти, това може да направи кода по-прост при добавяне на кратки функции:
класброяч{
_брой = 0;
увеличение = () => {
това._count += 1;
}
намаляване = () => {
това._count -= 1;
}
брои = () => {
връщанетова._броя;
}
}
позволявам ct = нов брояч ();
Роля в обектно-ориентираното програмиране
Докато функциите със стрелки на JavaScript са неразделна част от функционалното програмиране, те също имат място в обектно-ориентирано програмиране. Функциите със стрелки могат да се използват в декларациите на класа:
класorderLineItem{
_LineItemID = 0;
_Продукт = {};
_Количество = 1;конструктор(продукт) {
това._LineItemID = crypto.randomUUID();
това._Product = продукт
}
changeLineItemQuantity = (newQty) => {
това._Qty = newQty;
}
}
Използването на функция със стрелка за деклариране на методи в декларация на клас не променя поведението на функцията в класа. Извън класа обаче той излага функцията, позволявайки й да се използва от други класове.
Редовните функции не могат да бъдат достъпни извън декларацията на класа, без да бъдат извикани. Това означава, че докато други декларации на клас могат да наследят тези функции, те не могат да бъдат достъпни директно за съставяне на други класове.
Кога трябва да използвате функциите със стрелки на JavaScript?
Функциите със стрелки на JavaScript са невероятно мощна функция, която дава на разработчиците много повече контрол върху това до какъв обхват има достъп дадена функция. Знаейки кога обратното извикване трябва да има достъп до обхвата на своя родител и кога не, може да помогне на разработчика да определи кой тип декларация да използва.
Функциите със стрелки дават на програмистите ясен и кратък начин да пишат обратни извиквания, без да разкриват части от обхвата, които трябва да бъдат скрити. Те също така позволяват създаването на чисти и прости композиции, което допълнително позволява функционално програмиране в JavaScript.
JS разработчиците трябва да са наясно с разликите между двата синтаксиса и да имат предвид кой синтаксис е подходящ, когато декларират техните функции.
