Prečo by ste mali byť opatrní pri používaní funkcií šípok v JavaScripte

Syntax funkcie šípky prišla s vydaním ECMAScript 2015, tiež známeho ako ES6. Funkcie šípok sa dnes stali obľúbenou vlastnosťou mnohých programátorov JavaScriptu. Táto láska k funkciám šípok je spôsobená stručnou syntaxou a priamočiarym správaním kľúčového slova „toto“.

Funkcie šípok však majú určité nevýhody. Získajte informácie o kľúčových rozdieloch medzi funkciami šípok a bežnými funkciami a zistite, prečo je vo väčšine prípadov lepšie držať sa bežných funkcií.

1. Pred použitím musíte definovať funkciu šípky

Funkciu šípky nemôžete zdvihnúť. Predvolené pravidlá zdvíhania JavaScriptu vám umožňujú zavolať funkciu pred jej definovaním, ale to nie je prípad funkcií šípok. Ak máte súbor JavaScript s funkciami, znamenalo by to, že všetok dôležitý kód bude v spodnej časti súboru.

Zvážte napríklad nasledujúci kód JavaScript:

konšt doubleNumbers = (čísla) { 





instagram viewer


 čísla.mapa(n => n * 2)
}
konšt halveNumbers = (čísla) { 
 čísla.mapa(n => n / 2)
}
konšt sumNumbers = (čísla) { 
 čísla.redukovať((súčet, n) => { 
vrátiť súčet + n; 
 }, 0)
}
konšt čísla = [1, 20, 300, 700, 1500]
konšt doubled = doubleNumbers (čísla)
konzoly.log (halveNumbers (zdvojnásobené))
konzoly.log (sumNumbers (čísla))

Vo vyššie uvedenom bloku kódu je dôležitý kód dole. Všetky pomocné funkcie sú definované pred bodom vykonania. Musieť vytvorte si funkcie JavaScriptu v hornej časti súboru môže byť nepohodlné, pretože budete musieť prejsť nadol, aby ste videli skutočný kód, ktorý vykonáva prácu.

Ak ste presunuli pomocné funkcie nadol a skutočný kód nahor, zobrazí sa chyba odkazu. Runtime považuje funkciu za premennú. Preto ho musíte najskôr definovať pred prístupom alebo vyvolaním. Ak ste však skonvertovali všetky funkcie šípok na bežné funkcie (pomocou funkciu kľúčové slovo), potom by váš kód fungoval dobre. Dôležitý kód zároveň zostáva navrchu, kde ho môžete nájsť.

Toto je jeden z najväčších problémov pri používaní funkcií šípok. Nevykazujú žiadne hostiteľské správanie. Inými slovami, musíte ich definovať pred skutočným miestom, kde ich použijete. Na druhej strane môžete zdvihnúť bežné funkcie.

2. Funkcie šípok môžu byť pre niektorých ľudí mätúce

Ďalším dôvodom, prečo používať bežné funkcie namiesto funkcií šípok, je čitateľnosť. Bežné funkcie sú ľahšie čitateľné, pretože explicitne používajú funkciu kľúčové slovo. Toto kľúčové slovo identifikuje, že príslušný kód je funkcia.

Na druhej strane premenným priraďujete funkcie šípok. Ako nováčika vás to môže zmiasť, keď si myslíte, že kód je skôr premenná než funkcia.

Porovnajte dve funkcie nižšie:

konšt polovičné čísla = (čísla) => {
vrátiť čísla.mapa(n => n / 2)
}
funkciupolovičné čísla(čísla) { 
vrátiť čísla.mapa(n => n / 2)
}

Na prvý pohľad ľahko spoznáte, že druhá časť kódu je funkcia. Zo syntaxe je jasné, že kód je funkcia. Prvý z nich je však nejednoznačný – možno nebudete ľahko vedieť, či ide o premennú alebo funkciu.

3. Funkcie šípok nemôžete použiť ako metódy

Keď použijete funkciu šípky, toto kľúčové slovo zodpovedá všetkému, čo je mimo veci, v ktorej sa nachádzame. Vo väčšine prípadov je to objekt okna.

Zvážte nasledujúci objekt:

konšt osoba = {
 krstné meno: "Kyle",
 priezvisko: "variť",
 printName: () => {
konzoly.log(`${toto.krstné meno}``${toto.priezvisko}` )
 }
}
person.printName()

Ak spustíte kód, všimnete si, že prehliadač vytlačí nedefinované pre meno aj priezvisko. Keďže používame funkciu šípok, toto kľúčové slovo zodpovedá objektu okna. Tiež neexistuje krstné meno alebo priezvisko vlastnosť tam definovaná.

Ak chcete vyriešiť tento problém, musíte namiesto toho použiť bežnú funkciu:

konšt osoba = {
 krstné meno: "Kyle",
 priezvisko: "variť",
 printName: funkciu() {
konzoly.log(`${toto.krstné meno}``${toto.priezvisko}` )
 }
}
person.printName()

Toto bude fungovať dobre, pretože toto odkazuje na osoba objekt. Ak budete veľa robiť tento druh objektovo orientovaného programovania, potom sa musíte uistiť, že používate bežné funkcie. Funkcie šípok nebudú fungovať.

Kedy použiť funkcie šípok

Funkcie šípok používajte hlavne na miestach, kde potrebujete anonymnú funkciu. Príkladom takéhoto scenára je riešenie funkcie spätného volania. Pri písaní spätného volania je lepšie použiť funkciu šípky, pretože syntax je oveľa jednoduchšia ako písanie plnej funkcie.

Porovnajte tieto dva a rozhodnite sa, ktoré je jednoduchšie:

funkciupolovičné čísla(čísla) {
vrátiť čísla.mapa(n => n / 2)
}
funkciupolovičné čísla(čísla) {
vrátiť čísla.mapa(funkciu(n) {
vrátiť n / 2
 })
}

Oba prípady odovzdajú metóde map() funkciu spätného volania. Ale prvé spätné volanie je funkcia šípky, zatiaľ čo druhé je plná funkcia. Môžete vidieť, ako prvá funkcia zaberá menej riadkov kódu ako druhá funkcia: tri vs. päť.

Ďalší čas na použitie funkcií šípok je vždy, keď sa chcete zaoberať konkrétnou "túto" syntaxou. Objekt „tento“ sa bude meniť v závislosti od toho, či pre konkrétne veci používate bežné funkcie alebo funkcie šípok.

Nasledujúci blok kódu registruje dva prijímače udalostí „kliknutia“ na objekt dokumentu. Prvá inštancia používa bežnú funkciu ako spätné volanie, zatiaľ čo druhá používa funkciu šípky. V rámci oboch spätných volaní kód zaznamená objekt vykonávania (tento) a cieľ udalosti:

dokument.addEventListener("klik", funkciu(e) {
konzoly.log("FUNKCIA", toto, e.cieľ)
})
dokument.addEventListener("klik", (e) => {
konzoly.log("ŠÍPKA", toto, e.cieľ)
})

Ak by ste mali spustiť tento skript, všimnete si, že „tento“ odkaz je pre oba odlišný. Pre bežnú funkciu táto vlastnosť odkazuje na dokument, ktorý je rovnaký ako e.cieľ nehnuteľnosť. Ale pre funkciu šípky to odkazuje na objekt okna.

Keď použijete bežnú funkciu ako spätné volanie, bude to odkazovať na prvok, v ktorom spustíme udalosť. Ale keď použijete funkciu šípky, potom sa toto kľúčové slovo predvolí na objekt okna.

Získajte viac informácií o funkciách šípok a bežných funkciách

Existuje niekoľko ďalších jemných rozdielov medzi bežnými funkciami a funkciami šípok. Zvládnutie oboch typov funkcií je základom pre zvládnutie JavaScriptu. Naučte sa, kedy použiť jeden a kedy druhý; potom pochopíte dôsledky používania bežnej funkcie alebo funkcie šípky vo vašom JavaScripte.