Šipkové funkce podruhé

Podívejme se nyní znovu na šipkové funkce.

Šipkové funkce nejsou jen „zkratka“ pro zápis krátkého kódu. Mají určité velmi specifické a užitečné vlastnosti.

V JavaScriptu nastává spousta situací, kdy potřebujeme napsat malou funkci, která se bude spouštět někde jinde.

Například:

• pole.forEach(funkce) – funkce je spouÅ¡tÄ›na funkcí forEach pro každý prvek pole.
• setTimeout(funkce) – funkce je spouÅ¡tÄ›na zabudovaným plánovačem.
• …a mnoho dalších.

Vytvořit funkci a někam ji předat je zcela v duchu JavaScriptu.

A v takových funkcích obvykle nechceme opustit aktuální kontext. Tehdy šipkové funkce přijdou vhod.

Šipkové funkce nemají „this“

Jak si pamatujeme z kapitoly Objektové metody, „this“, Å¡ipkové funkce nemají this. Jestliže k this pÅ™istupujeme, vezme se zvnÄ›jÅ¡ku.

Například je můžeme použít k iteraci uvnitř objektové metody:

let skupina = {
  název: "Naše skupina",
  studenti: ["Jan", "Petr", "Alice"],

  zobrazSeznam() {
    this.studenti.forEach(
      student => alert(this.název + ': ' + student)
    );
  }
};

skupina.zobrazSeznam();

Zde je ve forEach použita Å¡ipková funkce, takže this.název v ní je pÅ™esnÄ› stejný jako ve vnÄ›jší metodÄ› zobrazSeznam. Tedy: skupina.název.

Kdybychom použili „obyčejnou“ funkci, nastala by chyba:

let skupina = {
  název: "Naše skupina",
  studenti: ["Jan", "Petr", "Alice"],

  zobrazSeznam() {
    this.studenti.forEach(function(student) {
      // Chyba: Nelze načíst vlastnost 'název' z undefined
      alert(this.název + ': ' + student)
    });
  }
};

skupina.zobrazSeznam();

Chyba nastane proto, že forEach standardnÄ› spouÅ¡tí funkci s this=undefined, takže je učinÄ›n pokus o přístup k undefined.název.

Na Å¡ipkové funkce to vliv nemá, protože ty prostÄ› this nemají.

Šipkové funkce nemají „arguments“

Å ipkové funkce také nemají promÄ›nnou arguments.

To je vynikající pro dekorátory, když potÅ™ebujeme pÅ™esmÄ›rovat volání s aktuálním this a arguments.

Například odlož(f, ms) pÅ™ijímá funkci a vrací obal kolem ní, který odloží její volání o ms milisekund:

function odlož(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function řekniAhoj(kdo) {
  alert('Ahoj, ' + kdo);
}

let řekniAhojOdložené = odlož(řekniAhoj, 2000);
řekniAhojOdložené("Jan"); // Ahoj, Jan po 2 sekundách

Totéž bez šipkové funkce by vypadalo následovně:

function odlož(f, ms) {
  return function(...argumenty) {
    let kontext = this;
    setTimeout(function() {
      return f.apply(kontext, argumenty);
    }, ms);
  };
}

Zde jsme museli vytvoÅ™it navíc promÄ›nné argumenty a kontext, aby je mohla pÅ™evzít funkce uvnitÅ™ setTimeout.

Shrnutí

Šipkové funkce:

• Nemají this.
• Nemají arguments.
• Nemohou být volány s new.
• Nemají také super, ale to jsme jeÅ¡tÄ› neprostudovali. Učiníme tak v 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 místo toho pracují v aktuálním. A v tomto způsobu použití opravdu vynikají.