Výukový program pre JavaScript: Funkcie vyššieho rádu

Minulý týždeň som ležérne upustil od výrazu „funkcia vyššieho rádu“, keď som hovoril o memoizácii. Aj keď sa teraz cítim dobre, keď hádam také výrazy, nevedel som vždy, čo znamenajú. Tento týždeň preskúmame, čo sú funkcie vyššieho rádu, ukážeme niekoľko bežných príkladov a naučíme sa, ako postupovať pri vytváraní vlastných.

Vo svojom jadre je funkcia vyššieho rádu iba funkciou, ktorá prijíma funkciu ako argument alebo vracia funkciu. To je v JavaScripte možné vďaka prvotriednym funkciám, čo znamená, že funkcie v JavaScripte je možné obchádzať ako každú inú premennú. Aj keď to znie celkom jednoducho, nie je to celkom telegrafné, aký druh sily máte s prvotriednymi funkciami.

Ak píšete JavaScript, pravdepodobne ste použili funkcie vyššieho rádu a ani ste si to nevšimli. Ak ste niekedy vymenili a pre slučka s metódou poľa, použili ste funkcie vyššieho rádu. Ak ste niekedy použili výsledky hovoru AJAX (bez async/čakať), použili ste funkcie vyššieho rádu (sľuby aj spätné volania zahŕňajú funkcie vyššieho rádu). Ak ste niekedy napísali komponent Reagovať, ktorý zobrazuje zoznam položiek, použili ste funkcie vyššieho rádu. Pozrime sa na tieto príklady:

const items = ['a', 'b', 'c', 'd', 'e']
// Namiesto toho pre cyklus ....
pre (nech i = 0; i <items.length - 1; i ++) {
  console.log (položky [i]);
}
// Môžeme použiť forEach, funkciu vyššieho rádu
// (forEach berie funkciu ako argument)
items.forEach ((item) => console.log (item));
// Spätné volania alebo sľuby, ak robíte
// asynchrónne požiadavky, ktoré používaš
// funkcie vyššieho rádu
get ('// aws.random.cat/meow', (odpoveď) => {
  putImageOnScreen (response.file);
});
get ('// random.dog/woof.json').then((response) => {
  putImageOnScreen (response.file);
});
// V komponente React nižšie sa používa mapa,
// čo je funkcia vyššieho rádu
const myListComponent = (rekvizity) => {
  návrat (
    
  {props.items.map ((item) => {
  návrat (
{item}
)
      })}
  );
};

Toto sú príklady funkcií vyššieho rádu, ktoré prijímajú funkcie ako argumenty, ale veľa z nich vráti aj funkcie. Ak ste niekedy videli volanie funkcie, ktorá má dve sady zátvoriek, jedná sa o funkciu vyššieho rádu. Takéto veci bývali menej časté, ale ak vôbec pracujete s Reduxom, pravdepodobne ste ich použili spojiť funkcia, ktorá je funkciou vyššieho rádu:

exportovať predvolené pripojenie (mapStateToProps, mapDispatchToProps) (MyComponent);

V prípade uvedenom vyššie voláme spojiť s dvoma argumentmi a vráti funkciu, ktorú okamžite zavoláme jedným argumentom. Možno ste videli aj (alebo napísali) jednoduchú knižnicu protokolovania, ktorá používa funkcie ako návratové hodnoty. V príklade nižšie vytvoríme záznamník, ktorý pred správou zaznamená jeho kontext:

const createLogger = (kontext) => {
  návrat (správa) => {
  console.log (`$ {context}: $ {msg}`);
  }
};
const log = createLogger ('myFile');
log („Veľmi dôležitá správa“);
// odhlási „myFile: Veľmi dôležitá správa“

Vyššie uvedený príklad začína ilustrovať časť sily funkcií vyššieho rádu (pozri tiež môj predchádzajúci príspevok o memoizácii). Poznač si to createLogger vezme argument, na ktorý odkazujeme v tele funkcie, ktorú vrátime. Vrátená funkcia, ktorú sme priradili premennej log, môže stále mať prístup k kontext argument, pretože to bolo v rozsahu, kde bola definovaná funkcia.

Zábavný fakt: Odkazy kontext je umožnená uzáverami. Nebudem sa tu teraz zaoberať závermi, pretože si zaslúžia svoj vlastný príspevok, ale dajú sa použiť v spojení s funkciami vyššieho rádu pre niektoré skutočne zaujímavé efekty.

Napríklad použitie uzáverov spolu s funkciami vyššieho rádu bývalo jediným spôsobom, ako sme mohli mať v JavaScripte „súkromné“ alebo proti neoprávneným premenným:

nech protectedObject = (function () {
  nech myVar = 0;
  návrat {
  get: () => myVar,
  prírastok: () => myVar ++,
  };
})();
protectedObject.get (); // vráti 0
protectedObject.increment ();
protectedObject.get (); // vráti 1
myVar = 42; // hups! práve ste vytvorili globálnu premennú
protectedObject.get (); // stále vracia 1

Nenechajme sa však uniesť. Funkcie vyššieho rádu nevyžadujú nič fantazijné, napríklad zatváranie. Sú to jednoducho funkcie, ktoré berú iné funkcie ako argumenty alebo ktoré vracajú funkcie. Bodka. Ak chcete ďalšie príklady alebo ďalšie informácie, prečítajte si kapitolu o funkciách vyššieho rádu v „Eloquent JavaScript“ od Marijna Haverbekeho.

Dotazy alebo pripomienky? Neváhajte kontaktovať na Twitteri: @freethejazz.