Funkce šipek vs. Regulární funkce v JavaScriptu

Jako téměř každý moderní programovací jazyk nabízí JavaScript způsoby, jak vytvářet funkce umožňující opětovné použití kódu. Pro ty, kteří tento jazyk neznají, existují dva různé způsoby, jak deklarovat funkci v JavaScriptu.

Původně, funkce bylo použito klíčové slovo a později byla vytvořena syntaxe šipky. I když se liší v přístupnosti rozsahu, klíčové slovo funkce i syntaxe šipky vytvářejí podobné výsledky.

Neschopnost rozlišovat mezi těmito dvěma může způsobit problémy a vést k nesprávnému použití. Pro moderního vývojáře JS je nezbytností pochopit, jak každá deklarace funkce ovlivňuje rozsah a viditelnost.

Jaké jsou funkce šipek JavaScriptu?

Funkce šipek JavaScriptu jsou alternativním způsobem, jak definovat funkce, které nepoužívají výchozí funkce klíčové slovo:

funkcelogMessage(zpráva) {
řídicí panel.log (zpráva);
}
konst logMessage = (zpráva) => {
řídicí panel.log (zpráva);
}
konst logMessage = zpráva =>řídicí panel.log (zpráva);

Nahoře můžete vidět stejnou zprávu napsanou třemi různými způsoby. První používá metodu deklarace běžné funkce. Následující dva ukazují dva způsoby použití funkcí šipek ES6.

JavaScript poprvé přijal syntaxi funkce šipky s vydáním standardů ECMAScript 2015. Funkce šipek nabízely čistý a stručný způsob rychlého vytváření funkcí a zajímavé řešení několika dlouhotrvajících problémů s rozsahem v JavaScriptu.

Díky těmto funkcím se funkce šipek rychle staly hitem mezi mnoha vývojáři. Programátoři, kteří se zabývají moderní kódovou základnou JavaScriptu, pravděpodobně najdou funkce šipek jako běžné funkce.

Jak se liší funkce šipek od běžných funkcí v JavaScriptu?

Na první pohled se zdá, že funkce šipek se příliš neliší od funkcí deklarovaných pomocí klíčového slova function. Mimo syntaxi oba zapouzdřují znovu použitelnou sadu akcí, které lze volat z jiného místa v kódu.

Navzdory podobnosti mezi těmito dvěma však existují určité rozdíly, kterých si vývojáři musí být vědomi.

Rozdíl v rozsahu

Kdykoli je v JavaScriptu deklarována běžná funkce, to funkce funguje jako uzávěr, který si vytváří vlastní rozsah. To může způsobit problém při používání určitých specializovaných funkcí, např setTimeout a nastavitInterval.

Před ES6 existovalo značné množství náhradních řešení, která zvedala položky na vyšší úrovně rozsahu pro použití při zpětných voláních. Tyto hacky fungovaly, ale byly často obtížně srozumitelné a mohly způsobit problémy s přepsáním určitých proměnných.

Funkce šipek vyřešily oba problémy jednoduchým a elegantním způsobem. Když je funkce šipky použita jako součást zpětného volání, má přístup ke stejnému rozsahu jako funkce, ze které byla volána.

To umožnilo používat funkce jako zpětná volání bez ztráty přístupu ke kontextu, ve kterém byla vyvolána původní událost. Jako jednoduchý test, který ukáže tento princip v akci, můžete nastavit funkci zpožděného zasílání zpráv, jako je ta níže:

funkcedelayedMessage(zpráva, zpoždění) {

 setTimeout(funkce(zpráva) {
řídicí panel.log (zpráva);
 }, zpoždění);
}
delayedMessage("Ahoj světe", 1000);

Funkce je jednoduchá, přijatelná zpráva a zpoždění v milisekundách. Po uplynutí prodlevy by měl zaznamenat zprávu do konzoly. Když je však kód spuštěn, nedefinováno bude přihlášen do konzole místo zprávy, která byla předána.

Po provedení funkce zpětného volání se změní rozsah a původní zpráva již není přístupná. Použití zprávy zevnitř uzávěrky vyžaduje, aby byla zpráva zvednuta do globální proměnné, což by mohlo vést k jejímu přepsání před zpětným voláním.

Správným řešením tohoto problému je funkce šipky. Pokud nahradíte první argument za setTimeout, rozsah lze udržovat a funkce bude mít přístup ke zprávě předané delayedMessage.

funkcedelayedMessage(zpráva, zpoždění) {

 setTimeout(() => {
řídicí panel.log (zpráva);
 }, zpoždění);
}
delayedMessage("Ahoj světe", 1000);

Nyní, když je proveden, delayedMessage funkce zaznamená zprávu. Navíc to umožňuje zařadit více zpráv do fronty s různým zpožděním a všechny se budou stále vyskytovat ve správný čas.

To je způsobeno tím, že pokaždé delayedMessage generuje svůj vlastní rozsah s vlastní kopií interní funkce šipky.

Čitelnost kódu

Zatímco funkce šipek jsou užitečné jako zpětná volání, používají se také k udržení čistého a stručného kódu. Ve výše uvedené části můžete vidět, že pomocí funkce šipky je snadno zřejmé, co se stane, když delayedMessage funkce je volána.

Jak se funkce stávají složitějšími, trocha srozumitelnosti může učinit kód mnohem čitelnějším. Při skládání objektů to může zjednodušit kód při přidávání krátkých funkcí:

třídačelit{
 _počet = 0;
 přírůstek = () => {
tento._count += 1;
 }
 snížení = () => {
tento._count -= 1;
 }
 počítat = () => {
vrátit setento._počet;
 }
}
nechat ct = Nový čelit();

Role v objektově orientovaném programování

Zatímco funkce šipek JavaScriptu jsou nedílnou součástí funkčního programování, mají také své místo objektově orientované programování. Funkce šipek lze použít v rámci deklarací třídy:

třídaorderLineItem{
 _LineItemID = 0;
 _Produkt = {};
 _množství = 1;
konstruktér(produkt) {
tento._LineItemID = krypto.randomUUID();
tento._Produkt = produkt
 }
 changeLineItemQuantity = (novéMnožství) => {
tento._Qty = novéQty;
 }
}

Použití funkce šipky k deklaraci metod v rámci deklarace třídy nemění chování funkce v rámci třídy. Mimo třídu však zpřístupňuje funkci a umožňuje ji používat jinými třídami.

K běžným funkcím nelze přistupovat mimo deklaraci třídy, aniž by byly volány. To znamená, že zatímco jiné deklarace tříd mohou tyto funkce zdědit, nelze k nim přímo přistupovat za účelem skládání jiných tříd.

Kdy byste měli používat funkce šipek JavaScriptu?

Funkce šipek JavaScriptu jsou neuvěřitelně výkonnou funkcí, která vývojářům poskytuje mnohem větší kontrolu nad tím, k jakému rozsahu má funkce přístup. Vědět, kdy by zpětné volání mělo mít přístup k rozsahu svého rodiče a kdy by nemělo, může vývojáři pomoci určit, jaký typ deklarace použít.

Šipkové funkce poskytují programátorům jasný a stručný způsob, jak zapisovat zpětná volání, aniž by odhalovali části rozsahu, které by měly být skryté. Umožňují také vytvářet čisté a jednoduché kompozice a dále umožňují funkční programování v JavaScriptu.

Vývojáři JS si musí být vědomi rozdílů mezi těmito dvěma syntaxemi a mít na paměti, která syntaxe je vhodná při deklarování jejich funkcí.