Programmēšana

JavaScript apmācība: augstāka pasūtījuma funkcijas

Pagājušajā nedēļā es nejauši atteicos no termina “augstākas pakāpes funkcija”, runājot par piezīmēm. Lai gan es tagad jūtos ērti izmest šādus terminus, es ne vienmēr zināju, ko tie nozīmē. Šonedēļ mēs pārbaudīsim, kas ir augstākas pakāpes funkcijas, parādīsim dažus izplatītākos piemērus un uzzināsim, kā turpināt veidot savas.

Būtībā augstākas pakāpes funkcija ir tikai funkcija, kas funkciju pieņem kā argumentu vai atgriež funkciju. Tas ir iespējams JavaScript, pateicoties pirmās klases funkcijām, kas nozīmē, ka JavaScript funkcijas var nodot tāpat kā jebkuru citu mainīgo. Lai gan tas izklausās diezgan vienkārši, tas ne visai telegrafē tādu spēku, kāds jums ir ar pirmās klases funkcijām.

Ja jūs rakstāt JavaScript, iespējams, esat izmantojis augstākas kārtas funkcijas un pat neesat pamanījis. Ja esat kādreiz nomainījis a priekš cilpa ar masīva metodi, jūs esat izmantojis augstākas kārtas funkcijas. Ja esat kādreiz izmantojis AJAX zvana rezultātus (bez asinhronais/gaidi), esat izmantojis augstākas kārtas funkcijas (gan solījumi, gan atzvanīšana ietver augstākas pakāpes funkcijas). Ja esat kādreiz uzrakstījis React komponentu, kurā tiek parādīts vienumu saraksts, esat izmantojis augstākas pakāpes funkcijas. Apskatīsim šos piemērus:

const vienumi = ['a', 'b', 'c', 'd', 'e']

// Šī vietā cilpa ....

par (lai i = 0; i <vienumi. garums - 1; i ++) {

console.log (vienumi [i]);

}

// Mēs varam izmantot forEach, augstākas pakāpes funkciju

// (forEach kā argumentu ņem funkciju)

items.forEach ((item) => console.log (item));

// Atzvani vai solījumi, ja jūs veicat

// asinhronie pieprasījumi, jūs izmantojat

// augstākas kārtas funkcijas

iegūt ('// aws.random.cat/meow', (atbilde) => {

putImageOnScreen (atbilde.fails);

});

get ('// random.dog/woof.json').tad((atbilde) => {

putImageOnScreen (atbilde.fails);

});

// Zemāk esošajā React komponentē tiek izmantota karte,

// kas ir augstākas pakāpes funkcija

const myListComponent = (rekvizīti) => {

atgriešanās (

   

    {props.items.map ((item) => {

    atgriešanās (

  • {lieta}
  • )

          })}

      );

    };

Šie ir augstākas pakāpes funkciju piemēri, kas funkcijas pieņem kā argumentus, taču daudzas no tām atgriež arī funkcijas. Ja esat kādreiz redzējis funkcijas izsaukumu, kuram ir divas iekavu kopas, tā ir augstākas pakāpes funkcija. Šāda veida lietas agrāk bija retāk sastopamas, taču, ja jūs vispār strādājat ar Redux, jūs, iespējams, izmantojāt savienot funkcija, kas ir augstākas pakāpes funkcija:

eksportēt noklusējuma savienojumu (mapStateToProps, mapDispatchToProps) (MyComponent);

Iepriekš minētajā gadījumā mēs piezvanām savienot ar diviem argumentiem un tas atgriež funkciju, kuru mēs uzreiz izsaucam ar vienu argumentu. Iespējams, esat redzējis (vai arī uzrakstījis) vienkāršu reģistrēšanas bibliotēku, kas funkcijas izmanto kā atgriešanās vērtības. Tālāk sniegtajā piemērā mēs izveidosim reģistrētāju, kas reģistrē kontekstu pirms ziņojuma:

const createLogger = (konteksts) => {

atgriešanās (msg) => {

console.log (`$ {context}: $ {msg}`);

  }

};

const log = createLogger ('myFile');

žurnāls ('Ļoti svarīgs ziņojums');

// atiet "myFile: ļoti svarīgs ziņojums"

Iepriekš minētais piemērs sāk ilustrēt dažus augstākas pakāpes funkciju spēkus (skat. Arī manu iepriekšējo ierakstu par piezīmēm). Pieraksti to createLogger ņem argumentu, uz kuru atsaucamies atgriezušās funkcijas ķermenī. Šī atgrieztā funkcija, kuru mēs piešķiram mainīgajam žurnāls, joprojām var piekļūt kontekstā arguments, jo funkcija bija definēta darbības jomā.

Jautrs fakts: atsauces kontekstā ir iespējams ar slēgšanu. Es šeit neiedziļināšos slēgšanā, jo viņi ir pelnījuši savu amatu, taču tos var izmantot kopā ar augstākas pakāpes funkcijām, lai iegūtu patiešām interesantus efektus.

Piemēram, aizvērumu izmantošana kopā ar augstākas pakāpes funkcijām bija vienīgais veids, kā JavaScript var būt “privāti” vai droši mainīgie:

ļaujiet aizsargātam objektam = (funkcija () {

ļaujiet myVar = 0;

atgriezties {

iegūt: () => myVar,

pieaugums: () => myVar ++,

  };

})();

protectedObject.get (); // atgriež 0

protectedObject.increment ();

protectedObject.get (); // atgriež 1

myVar = 42; // ohs! jūs tikko izveidojāt globālo mainīgo

protectedObject.get (); // joprojām atgriež 1

Neaizmirsīsimies. Funkcijām ar augstāku pasūtījumu nav nepieciešams nekas grezns, piemēram, slēgšana. Tās ir vienkārši funkcijas, kas citas funkcijas uztver kā argumentus vai kas atgriež funkcijas. Punkts. Ja vēlaties saņemt vairāk piemēru vai lasīt vairāk, skatiet Marijn Haverbeke nodaļu par augstākas pakāpes funkcijām “Eloquent JavaScript”.

Jautājumi vai komentāri? Jūtieties brīvi sazināties ar čivināt: @freethejazz.

$config[zx-auto] not found$config[zx-overlay] not found