Vraťme se k funkcím šipek.
Funkce šipek nejsou jen „zkratkou“ pro psaní malých věcí. Mají některé velmi specifické a užitečné funkce.
JavaScript je plný situací, kdy potřebujeme napsat malou funkci, která se spustí někde jinde.
Například:
arr.forEach(func)
–func
je spuštěnforEach
pro každou položku pole.setTimeout(func)
–func
je prováděno vestavěným plánovačem.- …je jich více.
Vytvořit funkci a někam ji předat je v duchu JavaScriptu.
A v takových funkcích obvykle nechceme opustit aktuální kontext. Zde se hodí funkce šipek.
Funkce šipek nemají žádné „toto“
Jak si pamatujeme z kapitoly Objektové metody, "toto", funkce šipky nemají this
. Pokud this
je zpřístupněno, je převzato zvenčí.
Můžeme ji například použít k iteraci uvnitř objektové metody:
let group = {
title: "Our Group",
students: ["John", "Pete", "Alice"],
showList() {
this.students.forEach(
student => alert(this.title + ': ' + student)
);
}
};
group.showList();
Zde v forEach
, používá se funkce šipka, takže this.title
v něm je přesně stejný jako ve vnější metodě showList
. To je:group.title
.
Pokud bychom použili „běžnou“ funkci, došlo by k chybě:
let group = {
title: "Our Group",
students: ["John", "Pete", "Alice"],
showList() {
this.students.forEach(function(student) {
// Error: Cannot read property 'title' of undefined
alert(this.title + ': ' + student);
});
}
};
group.showList();
K chybě dochází, protože forEach
spouští funkce s this=undefined
ve výchozím nastavení, takže pokus o přístup k undefined.title
je vyrobeno.
To nemá vliv na funkce šipek, protože prostě nemají this
.
new
Nemá this
přirozeně znamená další omezení:funkce šipek nelze použít jako konstruktory. Nelze je volat pomocí new
.
Mezi funkcí šipky =>
je nepatrný rozdíl a běžná funkce volaná s .bind(this)
:
.bind(this)
vytvoří „vázanou verzi“ funkce.- Šipka
=>
nevytváří žádnou vazbu. Funkce prostě nemáthis
. Vyhledáníthis
se provádí přesně stejným způsobem jako běžné vyhledávání proměnných:ve vnějším lexikálním prostředí.
Šipky nemají žádné „argumenty“
Funkce šipek také nemají arguments
proměnná.
To je skvělé pro dekoratéry, když potřebujeme přesměrovat hovor s aktuálním this
a arguments
.
Například defer(f, ms)
získá funkci a vrátí kolem ní obal, který zpozdí volání o ms
milisekundy:
function defer(f, ms) {
return function() {
setTimeout(() => f.apply(this, arguments), ms);
};
}
function sayHi(who) {
alert('Hello, ' + who);
}
let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // Hello, John after 2 seconds
Totéž bez funkce šipky by vypadalo takto:
function defer(f, ms) {
return function(...args) {
let ctx = this;
setTimeout(function() {
return f.apply(ctx, args);
}, ms);
};
}
Zde jsme museli vytvořit další proměnné args
a ctx
takže funkce uvnitř setTimeout
mohl by je vzít.
Shrnutí
Funkce šipek:
- Nemáte
this
- Nemáte
arguments
- Nelze volat pomocí
new
- Také nemají
super
, ale ještě jsme to nestudovali. Budeme se věnovat kapitole Třídní dědičnost
Je to proto, že jsou určeny pro krátké části kódu, které nemají svůj vlastní „kontext“, ale fungují v tom aktuálním. A v tomto případě použití opravdu září.