Funkce šipky JavaScriptu
Funkce šipek byly zavedeny v ES6.
Funkce šipek nám umožňují psát kratší syntaxi funkce:
let myFunction = (a, b) => a * b;
Před:
hello = function() {
return "Hello World!";
}
S funkcí šipky:
hello = () => {
return "Hello World!";
}
Zkracuje se! Pokud má funkce pouze jeden příkaz a příkaz vrací hodnotu, můžete odstranit závorky a klíčové
returnslovo:
Funkce šipek vrací výchozí hodnotu:
hello = () => "Hello World!";
Poznámka: Toto funguje pouze v případě, že funkce má pouze jeden příkaz.
Pokud máte parametry, předáte je v závorkách:
Funkce šipky s parametry:
hello = (val) => "Hello " + val;
Ve skutečnosti, pokud máte pouze jeden parametr, můžete přeskočit i závorky:
O čem this?
Manipulace s thisfunkcemi se také liší ve funkcích šipek ve srovnání s běžnými funkcemi.
Stručně řečeno, s funkcemi šipek neexistuje žádná vazba
this.
V běžných funkcích představuje thisklíčové slovo objekt, který funkci volá, což může být okno, dokument, tlačítko nebo cokoli jiného.
U funkcí šipky thisklíčové slovo vždy představuje objekt, který definoval funkci šipky.
Podívejme se na dva příklady, abychom pochopili rozdíl.
Oba příklady volají metodu dvakrát, nejprve při načtení stránky a ještě jednou, když uživatel klikne na tlačítko.
První příklad používá běžnou funkci a druhý příklad používá funkci šipky.
Výsledek ukazuje, že první příklad vrací dva různé objekty (okno a tlačítko) a druhý příklad vrací objekt okna dvakrát, protože objekt okna je „vlastníkem“ funkce.
Příklad
S běžnou funkcí thispředstavuje objekt, který funkci volá :
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Příklad
Pomocí funkce šipka thispředstavuje
vlastníka funkce:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Pamatujte na tyto rozdíly, když pracujete s funkcemi. Někdy je chování běžných funkcí takové, jaké chcete, pokud ne, použijte funkce šipek.
Podpora prohlížeče
Následující tabulka definuje první verze prohlížeče s plnou podporou funkcí Arrow v JavaScriptu:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |