Funkce šipek jsou čistší a jednodušší než jejich sáhodlouhá běžná alternativa, ale neměli byste s nimi spěchat, aniž byste věděli, jak fungují.
Syntaxe funkce šipky dorazila s vydáním ECMAScript 2015, známého také jako ES6. Dnes se funkce šipek staly oblíbenou funkcí mnoha programátorů JavaScriptu. Tato láska k funkcím šipek je způsobena stručnou syntaxí a přímočarým chováním klíčového slova „toto“.
Ale funkce šipek mají některé nevýhody. Seznamte se s klíčovými rozdíly mezi funkcemi šipek a běžnými funkcemi a zjistěte, proč je ve většině případů lepší držet se běžných funkcí.
1. Před použitím musíte definovat funkci šipky
Nemůžete zvednout funkci šipky. Výchozí pravidla zvedání JavaScriptu umožňují zavolat funkci před jejím definováním, ale to není případ funkcí šipek. Pokud máte soubor JavaScript s funkcemi, znamenalo by to, že veškerý důležitý kód bude dole v souboru.
Zvažte například následující kód JavaScript:
konst doubleNumbers = (čísla) {
čísla.mapa(n => n * 2)
}konst halveNumbers = (čísla) {
čísla.mapa(n => n / 2)
}konst sumNumbers = (čísla) {
čísla.redukovat((součet, n) => {
vrátit se součet + n;
}, 0)
}
konst čísla = [1, 20, 300, 700, 1500]
konst doubled = doubleNumbers (čísla)
řídicí panel.log (halveNumbers (zdvojené))
řídicí panel.log (sumNumbers (čísla))
Ve výše uvedeném bloku kódu je důležitý kód dole. Všechny pomocné funkce jsou definovány před bodem provedení. Muset vytvořte si své funkce JavaScriptu v horní části souboru může být nepohodlné, protože budete muset posouvat dolů, abyste viděli skutečný kód, který tuto práci dělá.
Pokud jste přesunuli pomocné funkce dolů a skutečný kód nahoru, zobrazí se chyba reference. Runtime považuje funkci za proměnnou. Před přístupem nebo vyvoláním jej tedy musíte nejprve definovat. Ale pokud jste převedli všechny funkce šipek na běžné funkce (s funkce klíčové slovo), pak by váš kód fungoval dobře. Důležitý kód přitom zůstává nahoře, kde jej můžete najít.
Toto je jeden z největších problémů při používání funkcí šipek. Nevykazují žádné hostitelské chování. Jinými slovy, musíte je definovat před skutečným místem, kde je použijete. Na druhou stranu můžete zvednout běžné funkce.
2. Funkce šipek mohou být pro některé lidi matoucí
Dalším důvodem, proč používat běžné funkce místo funkcí šipek, je čitelnost. Běžné funkce jsou snadněji čitelné, protože explicitně používají funkce klíčové slovo. Toto klíčové slovo označuje, že daný kód je funkce.
Na druhou stranu proměnným přiřadíte funkce šipek. Jako nováčka vás to může zmást, abyste si mysleli, že kód je spíše proměnná než funkce.
Porovnejte dvě funkce níže:
konst poloviční čísla = (čísla) => {
vrátit se čísla.mapa(n => n / 2)
}
funkcehalveNumbers(čísla) {
vrátit se čísla.mapa(n => n / 2)
}
Na první pohled snadno poznáte, že druhý kus kódu je funkce. Syntaxe objasňuje, že kód je funkce. První z nich je však nejednoznačný – možná nebudete snadno rozlišovat, zda se jedná o proměnnou nebo funkci.
3. Nemůžete použít funkce šipek jako metody
Když použijete funkci šipky, tento klíčové slovo odpovídá čemukoli, co je mimo věc, ve které jsme. Ve většině případů je to objekt okna.
Zvažte následující objekt:
konst osoba = {
jméno: "Kyle",
příjmení: "Kuchař",
printName: () => {
řídicí panel.log(`${tento.jméno}``${tento.příjmení}` )
}
}
person.printName()
Pokud kód spustíte, všimnete si, že prohlížeč vytiskne nedefinováno pro jméno i příjmení. Protože používáme funkci šipky, tento klíčové slovo odpovídá objektu okna. Také neexistuje jméno nebo příjmení vlastnost tam definovaná.
Chcete-li tento problém vyřešit, musíte místo toho použít běžnou funkci:
konst osoba = {
jméno: "Kyle",
příjmení: "Kuchař",
printName: funkce() {
řídicí panel.log(`${tento.jméno}``${tento.příjmení}` )
}
}
person.printName()
To bude fungovat dobře, protože tento Odkazuje na osoba objekt. Pokud budete tento druh objektově orientovaného programování provádět hodně, pak se budete muset ujistit, že používáte běžné funkce. Funkce šipek nebudou fungovat.
Kdy použít funkce šipek
Funkce šipek používejte hlavně v místech, kde potřebujete anonymní funkci. Příkladem takového scénáře je řešení funkce zpětného volání. Při psaní zpětného volání je lepší použít funkci šipky, protože syntaxe je mnohem jednodušší než psaní plné funkce.
Porovnejte tyto dva a rozhodněte se, co je jednodušší:
funkcehalveNumbers(čísla) {
vrátit se čísla.mapa(n => n / 2)
}
funkcehalveNumbers(čísla) {
vrátit se čísla.mapa(funkce(n) {
vrátit se n / 2
})
}
Oba případy předají metodě map() funkci zpětného volání. Ale první zpětné volání je funkce šipky, zatímco druhé je plná funkce. Můžete vidět, jak první funkce zabírá méně řádků kódu než druhá funkce: tři vs. Pět.
Další čas, kdy můžete použít funkce šipek, je vždy, když se chcete vypořádat s konkrétní "touto" syntaxí. Objekt "tento" se bude měnit v závislosti na tom, zda pro konkrétní věci používáte běžné funkce nebo funkce šipek.
Následující blok kódu registruje dva posluchače události „kliknutí“ na objekt dokumentu. První instance používá jako zpětné volání běžnou funkci, zatímco druhá používá funkci šipky. Uvnitř obou zpětných volání kód zaznamenává objekt provádění (toto) a cíl události:
dokument.addEventListener("kliknout", funkce(E) {
řídicí panel.log("FUNKCE", tento, e.target)
})
dokument.addEventListener("kliknout", (e) => {
řídicí panel.log("ŠIPKA", tento, e.target)
})
Pokud byste spustili tento skript, všimnete si, že „tento“ odkaz se pro oba liší. U běžné funkce tato vlastnost odkazuje na dokument, který je stejný jako e.cíl vlastnictví. Ale pro funkci šipky to odkazuje na objekt okna.
Když použijete běžnou funkci jako zpětné volání, bude to odkazovat na prvek, kde spouštíme událost. Ale když použijete funkci šipky, pak se toto klíčové slovo použije jako výchozí objekt okna.
Zjistěte více o funkcích šipek vs. běžné funkce
Mezi běžnými funkcemi a funkcemi šipek existuje několik dalších jemných rozdílů. Zvládnutí obou typů funkcí je základem pro zvládnutí JavaScriptu. Naučte se, kdy použít jeden a kdy druhý; pak pochopíte důsledky použití běžné funkce nebo funkce šipky ve vašem JavaScriptu.