JavaScript-opetusohjelma: korkeamman tason toiminnot

Viime viikolla pudotin rennosti termin "korkeamman asteen toiminto" puhuessani muistioinnista. Vaikka tunnen oloni mukavaksi heittää sellaisia ​​termejä nyt, en aina tiennyt, mitä ne tarkoittavat. Tällä viikolla tutkimme, mitä korkeamman asteen toiminnot ovat, näytämme joitain yleisiä esimerkkejä ja opimme luomaan omat.

Ytimessä korkeamman asteen funktio on vain funktio, joka hyväksyy funktion argumenttina tai palauttaa funktion. Tämä on mahdollista JavaScriptissä ensiluokkaisten toimintojen ansiosta, mikä tarkoittaa, että JavaScriptin toiminnot voidaan välittää kuten kaikki muutkin muuttujat. Vaikka tämä kuulostaa melko suoraviivaiselta, se ei aivan sähke sellaista voimaa kuin sinulla on ensiluokkaisilla toiminnoilla.

Jos kirjoitat JavaScriptiä, olet todennäköisesti käyttänyt korkeamman tason toimintoja etkä edes huomannut. Jos olet koskaan korvannut a varten silmukka matriisimenetelmällä, olet käyttänyt korkeamman asteen toimintoja. Jos olet joskus käyttänyt AJAX-puhelun tuloksia (ilman asynkronoitu/odottaa), olet käyttänyt korkeamman tason toimintoja (sekä lupauksissa että soittopyynnöissä käytetään korkeamman tason toimintoja). Jos olet koskaan kirjoittanut React-komponentin, joka näyttää kohteiden luettelon, olet käyttänyt korkeamman asteen toimintoja. Katsotaanpa nuo esimerkit:

const kohteet = ['a', 'b', 'c', 'd', 'e']
// Tämän sijaan silmukalle ....
for (olkoon i = 0; i <kohteet. pituus - 1; i ++) {
  console.log (kohteet [i]);
}
// Voimme käyttää forEachia, korkeamman asteen funktiota
// (forEach ottaa funktion argumenttina)
items.forEach ((item) => konsoli.log (item));
// Takaisinkutsut tai lupaukset, jos teet
// asynkroniset pyynnöt, käytät
// korkeamman asteen toiminnot
get ('// aws.random.cat/meow', (vastaus) => {
  putImageOnScreen (vastaus.tiedosto);
});
get ('// satunnainen.koira/woof.json').then((response) => {
  putImageOnScreen (vastaus.tiedosto);
});
// Alla olevassa React-komponentissa käytetään karttaa,
// joka on korkeamman asteen funktio
const myListComponent = (rekvisiitta) => {
  paluu (
    
  {props.items.map ((item) => {
  paluu (
{item}
)
      })}
  );
};

Nämä ovat esimerkkejä korkeamman tason funktioista, jotka hyväksyvät funktiot argumentteina, mutta monet niistä palauttavat myös funktioita. Jos olet joskus nähnyt funktiokutsun, jossa on kaksi sulua, se on korkeamman asteen funktio. Tällainen asia oli aiemmin harvinaisempi, mutta jos työskentelet Reduxin kanssa lainkaan, olet todennäköisesti käyttänyt kytkeä toiminto, joka on korkeamman asteen funktio:

vie oletusyhteys (mapStateToProps, mapDispatchToProps) (Oma komponentti);

Yllä olevassa tapauksessa soitamme kytkeä kahdella argumentilla ja se palauttaa funktion, jota kutsumme välittömästi yhdellä argumentilla. Olet ehkä nähnyt (tai kirjoittanut) yksinkertaisen kirjauskirjaston, joka käyttää toimintoja palautusarvoina. Alla olevassa esimerkissä luomme kirjaajan, joka kirjaa kontekstinsa ennen viestiä:

const createLogger = (konteksti) => {
  return (msg) => {
  console.log (`$ {context}: $ {msg}`);
  }
};
const log = createLogger ('myFile');
loki ('erittäin tärkeä viesti');
// kirjautuu ulos "myFile: erittäin tärkeä viesti"

Yllä oleva esimerkki alkaa havainnollistaa joitain korkeamman asteen funktioiden voimaa (katso myös edellinen muistiinpanoistani). Ota huomioon, että createLogger ottaa argumentin, johon viittaamme palautettavan funktion rungossa. Tämä palautettu funktio, jonka annamme muuttujalle Hirsi, voi silti käyttää yhteydessä argumentti, koska funktio määritettiin sen laajuudessa.

Hauska tosiasia: viittaaminen yhteydessä on mahdollista sulkemisten avulla. En aio sulkea täällä, koska he ansaitsevat oman virkansa, mutta niitä voidaan käyttää yhdessä korkeamman tason toimintojen kanssa todella mielenkiintoisiin vaikutuksiin.

Esimerkiksi sulkemisten käyttö korkeamman asteen toimintojen kanssa oli aiemmin ainoa tapa, jolla JavaScript-järjestelmässä voi olla "yksityisiä" tai peukaloittomia muuttujia:

anna suojattu objekti = (funktio () {
  anna myVar = 0;
  paluu {
  get: () => myVar,
  lisäys: () => myVar ++,
  };
})();
protectedObject.get (); // palauttaa arvon 0
protectedObject.crement ();
protectedObject.get (); // palauttaa arvon 1
myVar = 42; // hups! olet juuri luonut globaalin muuttujan
protectedObject.get (); // palauttaa silti 1

Älkäämme kuitenkaan laskeutuko. Korkeamman tilauksen toiminnot eivät vaadi mitään hienoa, kuten sulkemisia. Ne ovat yksinkertaisesti toimintoja, jotka ottavat muita toimintoja argumentteina tai jotka palauttavat funktioita. Täysi pysähdys. Jos haluat lisää esimerkkejä tai jatkokäsittelyä, tutustu Marijn Haverbeken ”Eloquent JavaScript” -kappaleen korkeamman tason toimintoihin.

Kysymyksiä tai kommentteja? Ota rohkeasti yhteyttä Twitteriin: @freethejazz.