Znovu navštívené funkce šipek

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ěn forEach 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 .

Funkce šipek nelze spouštět s new

Nemá this přirozeně znamená další omezení:funkce šipek nelze použít jako konstruktory. Nelze je volat pomocí new .

Šipkové funkce VS bind

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áří.