Funkcie šípok vs. Regulárne funkcie v JavaScripte

Ako takmer každý moderný programovací jazyk, aj JavaScript ponúka spôsoby na vytváranie funkcií, ktoré umožňujú opätovné použitie kódu. Pre tých, ktorí tento jazyk nepoznajú, existujú dva rôzne spôsoby, ako deklarovať funkciu v JavaScripte.

Pôvodne, funkciu bolo použité kľúčové slovo a neskôr bola vytvorená syntax šípky. Kľúčové slovo funkcie a syntax šípky, hoci sa líšia v prístupnosti rozsahu, vytvárajú podobné výsledky.

Neschopnosť rozlíšiť medzi nimi môže spôsobiť problémy a viesť k nesprávnemu použitiu. Pre moderného vývojára JS je nevyhnutné, aby pochopil, ako každá deklarácia funkcie ovplyvňuje rozsah a viditeľnosť.

Aké sú funkcie šípok JavaScriptu?

Funkcie šípok JavaScriptu predstavujú alternatívny spôsob definovania funkcií, ktoré nepoužívajú predvolené nastavenia funkciu kľúčové slovo:

funkciulogMessage(správu) {
konzoly.log (správa);
}
konšt logMessage = (správu) => {
konzoly.log (správa);
}
konšt logMessage = správu =>konzoly.log (správa);

Vyššie môžete vidieť rovnakú správu napísanú tromi rôznymi spôsobmi. Prvý používa metódu deklarácie bežnej funkcie. Nasledujúce dva ukazujú dva spôsoby použitia funkcií šípok ES6.

JavaScript prvýkrát prijal syntax funkcie šípok s vydaním štandardov ECMAScript 2015. Funkcie šípok ponúkali čistý a stručný spôsob rýchleho vytvárania funkcií a zaujímavé riešenie niekoľkých dlhotrvajúcich problémov s rozsahom v JavaScripte.

Vďaka týmto vlastnostiam sa funkcie šípok rýchlo stali hitom medzi mnohými vývojármi. Programátori, ktorí hľadajú modernú kódovú základňu JavaScriptu, nájdu funkcie šípok rovnako ako bežné funkcie.

Ako sa funkcie šípok líšia od bežných funkcií v JavaScripte?

Na prvý pohľad sa zdá, že funkcie šípok sa príliš nelíšia od funkcií deklarovaných pomocou kľúčového slova function. Mimo syntaxe obe zapuzdrujú opakovane použiteľnú množinu akcií, ktoré možno volať z iného miesta v kóde.

Napriek podobnosti medzi nimi však existujú určité rozdiely, ktorých si vývojári musia uvedomiť.

Rozdiel v rozsahu

Kedykoľvek je v JavaScripte deklarovaná regulárna funkcia, to funguje ako uzáver, ktorý vytvára vlastný rozsah. To môže spôsobiť problém pri používaní určitých špecializovaných funkcií, napr setTimeout a setInterval.

Pred ES6 existovalo značné množstvo riešení, ktoré zdvíhali položky do vyšších úrovní rozsahu na použitie pri spätných volaniach. Tieto hacky fungovali, ale často boli ťažko pochopiteľné a mohli spôsobiť problémy s prepísaním určitých premenných.

Funkcie šípok vyriešili oba problémy jednoduchým a elegantným spôsobom. Keď sa funkcia šípky použije ako súčasť spätného volania, má prístup k rovnakému rozsahu ako funkcia, z ktorej bola volaná.

To umožnilo použiť funkcie ako spätné volanie bez straty prístupu ku kontextu, v ktorom bola volaná pôvodná udalosť. Ako jednoduchý test na preukázanie tohto princípu v akcii môžete nastaviť funkciu oneskoreného odosielania správ, ako je tá nižšie:

funkciuoneskorená správa(správa, meškanie) {

 setTimeout(funkciu(správu) {
konzoly.log (správa);
 }, oneskorenie);
}
delayedMessage("Ahoj svet", 1000);

Funkcia je jednoduchá, akceptujúca správu a meškanie v milisekundách. Po uplynutí oneskorenia by sa mala správa prihlásiť do konzoly. Keď sa však kód spustí, nedefinované sa prihlási do konzoly namiesto správy, ktorá bola odovzdaná.

Po vykonaní funkcie spätného volania sa rozsah zmení a pôvodná správa už nie je prístupná. Použitie správy v rámci uzávierky vyžaduje, aby bola správa zdvihnutá do globálnej premennej, čo by mohlo viesť k jej prepísaniu pred spätným volaním.

Správnym riešením tohto problému je funkcia šípky. Ak nahradíte prvý argument za setTimeout, rozsah môže byť zachovaný a funkcia bude mať prístup k správe odovzdanej oneskorená správa.

funkciuoneskorená správa(správa, meškanie) {

 setTimeout(() => {
konzoly.log (správa);
 }, oneskorenie);
}
delayedMessage("Ahoj svet", 1000);

Teraz, keď sa vykoná, oneskorená správa funkcia zaznamená správu. Okrem toho to umožňuje, aby sa viaceré správy zaradili do frontu s rôznym oneskorením a všetky sa stále vyskytnú v správnom čase.

Je to spôsobené tým, že zakaždým oneskorená správa sa používa, generuje vlastný rozsah s vlastnou kópiou funkcie internej šípky.

Čitateľnosť kódu

Zatiaľ čo funkcie šípok sú užitočné ako spätné volania, používajú sa aj na udržanie čistého a prehľadného kódu. Vo vyššie uvedenej časti môžete vidieť, že pomocou funkcie šípky je ľahko zrejmé, čo sa stane, keď oneskorená správa funkcia sa volá.

Keďže funkcie sa stávajú zložitejšími, trocha prehľadnosti môže urobiť kód oveľa čitateľnejším. Pri skladaní objektov to môže zjednodušiť kód pri pridávaní krátkych funkcií:

triedapočítadlo{
 _počet = 0;
 prírastok = () => {
toto._count += 1;
 }
 zníženie = () => {
toto._count -= 1;
 }
 počítať = () => {
vrátiťtoto._počet;
 }
}
nech ct = Nový counter();

Úloha v objektovo orientovanom programovaní

Zatiaľ čo funkcie šípok JavaScriptu sú neoddeliteľnou súčasťou funkčného programovania, majú tiež svoje miesto objektovo orientované programovanie. Funkcie šípok možno použiť v rámci deklarácií triedy:

triedaorderLineItem{
 _LineItemID = 0;
 _Produkt = {};
 _Qty = 1;
konštruktér(produkt) {
toto._LineItemID = krypto.randomUUID();
toto._Produkt = produkt
 }
 changeLineItemQuantity = (novéMnožstvo) => {
toto._Qty = novéMnožstvo;
 }
}

Použitie funkcie šípky na deklarovanie metód v rámci deklarácie triedy nemení správanie funkcie v rámci triedy. Mimo triedy však odhaľuje funkciu, čo umožňuje jej použitie v iných triedach.

K bežným funkciám nie je možné pristupovať mimo deklarácie triedy bez ich volania. To znamená, že zatiaľ čo iné deklarácie tried môžu dediť tieto funkcie, nie je možné k nim priamo pristupovať na vytvorenie iných tried.

Kedy by ste mali používať funkcie šípok JavaScriptu?

Funkcie šípok JavaScriptu sú neuveriteľne výkonnou funkciou, ktorá dáva vývojárom oveľa väčšiu kontrolu nad rozsahom, ku ktorému má funkcia prístup. Vedieť, kedy by spätné volanie malo mať prístup k rozsahu svojho rodiča a kedy by nemalo, môže vývojárovi pomôcť určiť, ktorý typ deklarácie použiť.

Funkcie šípok poskytujú programátorom jasný a stručný spôsob, ako písať spätné volania bez odhalenia častí rozsahu, ktoré by mali byť skryté. Umožňujú tiež vytvárať čisté a jednoduché kompozície a ďalej umožňujú funkčné programovanie v JavaScripte.

Vývojári JS si musia byť vedomí rozdielov medzi týmito dvoma syntaxami a musia si uvedomiť, ktorá syntax je vhodná pri deklarovaní ich funkcií.