Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Funkcija je del kode za večkratno uporabo, ki se zažene, ko jo pokličete. Funkcije vam omogočajo ponovno uporabo kode, zaradi česar je bolj modularna in lažja za vzdrževanje.

Obstaja več načinov za ustvarjanje funkcij v JavaScriptu. Tukaj se boste naučili različnih načinov ustvarjanja funkcij in njihove uporabe.

Deklaracije funkcij: preprosta pot

Eden od načinov za ustvarjanje funkcij v JavaScriptu je prek deklaracij funkcij. Deklaracija funkcije je funkcija v JavaScriptu, ki sledi spodnji sintaksi.

funkcijoime funkcije(parametri) {
// koda gre tukaj ...
vrnitev"To je deklaracija funkcije";
}

Komponente zgornjega bloka kode vključujejo:

  • The funkcijo ključna beseda: Ta ključna beseda deklarira funkcijo.
  • ime funkcije: To je ime funkcije. V praksi bi moral biti čim bolj opisen in smiseln ter navajati, kaj funkcija počne.
  • parametri: To predstavlja parametre funkcije. Parametri so izbirni seznam spremenljivk, ki jih lahko posredujete funkciji, ko jo pokličete.
  • Telo funkcije: vsebuje kodo, ki jo bo funkcija zagnala, ko jo pokličete. Obdan je z zavitimi oklepaji {} in lahko vsebuje katero koli veljavno kodo JavaScript.
  • The vrnitev Stavek: ta stavek ustavi izvajanje funkcije in vrne določeno vrednost. V zgornjem primeru bi klic funkcije vrnil niz »To je deklaracija funkcije«.

Na primer, spodnja deklaracija funkcije vzame tri številke kot parametre in vrne njihovo vsoto.

funkcijoaddThreeNumbers(a, b, c) {
vrnitev a + b + c;
}

Če želite poklicati deklaracijo funkcije v JavaScriptu, napišite ime funkcije, ki mu sledi niz oklepajev (). Če funkcija sprejme kakršne koli parametre, jih posredujte kot argumente v oklepajih.

Na primer:

dodajTriŠtevilke(1, 2, 3) // 6

Zgornji kodni blok pokliče addThreeNumber funkcije in posreduje 1, 2 in 3 kot argumente funkciji. Če zaženete to kodo, bo vrnila vrednost 6.

JavaScript dviguje deklaracije funkcij, kar pomeni, da jih lahko pokličete, preden jih definirate.

Na primer:

isHoisted(); // Funkcija je dvignjena
funkcijoisHoisted() {
konzola.log("Funkcija je dvignjena");
vrnitevprav;
}

Kot je prikazano v zgornjem kodnem bloku, klicanje isHoisted pred definiranjem ne bi povzročilo napake.

Funkcijski izrazi: Funkcije kot vrednosti

V JavaScriptu lahko definirate funkcijo kot izraz. Nato lahko vrednost funkcije dodelite spremenljivki ali jo uporabite kot argument drugi funkciji.

Znane so tudi kot anonimne funkcije, saj nimajo imen in jih lahko pokličete le iz spremenljivke, ki ste ji jih dodelili.

Spodaj je sintaksa za izraz funkcije:

konst ime funkcije = funkcijo () {
vrnitev"Izraz funkcije";
};

Če želite poklicati funkcijski izraz v JavaScriptu, napišite ime spremenljivke, ki ste jo dodelili funkciji, ki mu sledi niz oklepajev (). Če funkcija sprejme kakršne koli parametre, jih posredujte kot argumente v oklepajih.

Na primer:

Imefunkcije(); // Izraz funkcije

Funkcijski izrazi so priročni pri ustvarjanju funkcij, ki se izvajajo v drugih funkcijah. Tipični primeri vključujejo obdelovalce dogodkov in njihove povratne klice.

Na primer:

button.addEventListener("klik", funkcijo (dogodek) {
konzola.log("Kliknili ste na gumb!");
});

Zgornji primer je uporabil funkcijski izraz, ki sprejme an dogodek argument kot povratni klic na addEventListener funkcijo. Funkcije vam ni treba izrecno klicati, če uporabite funkcijski izraz kot povratni klic. Samodejno ga pokliče nadrejena funkcija.

V zgornjem primeru, ko poslušalec dogodka prejme a kliknite dogodek, pokliče funkcijo povratnega klica in posreduje dogodek objekt kot argument.

Za razliko od deklaracij funkcij funkcijski izrazi niso dvignjeni, zato jih ne morete poklicati, preden jih definirate. Poskus dostopa do izraza funkcije, preden ga definirate, bo povzročil a ReferenceError.

Na primer:

isHoisted(); // ReferenceError: ni mogoče dostopati do 'isHoisted' pred inicializacijo
konst isHoisted = funkcijo () {
konzola.log("Funkcija je dvignjena");
};

Funkcije puščic: kompaktna in omejena

ES6 je uvedel okrajšavo za pisanje anonimnih funkcij v JavaScript, imenovano puščične funkcije. Imajo jedrnato sintakso, ki lahko naredi vašo kodo bolj berljivo, zlasti ko imate opravka s kratkimi funkcijami v eni vrstici.

Za razliko od drugih metod ustvarjanja funkcij puščične funkcije ne zahtevajo funkcijo ključna beseda. Izraz puščične funkcije je sestavljen iz treh delov:

  • Par oklepajev (()), ki vsebuje parametre. Oklepaje lahko izpustite, če ima funkcija samo en parameter.
  • Puščica (=>), ki je sestavljen iz enačaja (=) in znak večje kot (>).
  • Par zavitih oklepajev, ki vsebuje telo funkcije. Zavite oklepaje lahko izpustite, če je funkcija sestavljena iz enega izraza.

Na primer:

// En parameter, implicitna vrnitev
konst ime funkcije = parameter =>konzola.log("Funkcija puščice z enim parametrom")
// Več parametrov, eksplicitna vrnitev
konst ime funkcije = (parameter_1, parameter_2) => {
vrnitev"Funkcija puščice z več parametri"
};

Ko izpustite zavite oklepaje, puščična funkcija implicitno vrne en izraz, tako da ni potrebe po vrnitev ključna beseda. Po drugi strani, če ne izpustite zavitih oklepajev, morate izrecno vrniti vrednost z vrnitev ključna beseda.

Funkcije puščic so tudi drugačne to zavezujoče v primerjavi z običajnimi funkcijami. V rednih funkcijah je vrednost to odvisno od tega, kako pokličete funkcijo. V funkciji puščice, to je vedno vezan na to vrednost okoliškega obsega.

Na primer:

konst foo = {
 ime: "Dave",
 pozdravi: funkcijo () {
 setTimeout(() => {
konzola.log(`Pozdravljeni, ime mi je ${to.name}`);
 }, 1000);
 },
};
foo.greet(); // Zapiše "Pozdravljeni, ime mi je Dave" po 1 sekundi

V zgornjem primeru funkcija puščice znotraj pozdraviti metoda ima dostop do to.ime, čeprav je setTimeout funkcija jo pokliče. Normalna funkcija bi imela svoje to vezan na globalni objekt.

Kot pove že ime, je takoj priklicana funkcija (IIFE) funkcija, ki se zažene takoj, ko je definirana.

Tukaj je struktura IIFE:

(funkcijo () {
// koda tukaj
})();
(() => {
// koda tukaj
})();
(funkcijo (parameter_1, parameter_2) {
konzola.log (param_1 * param_2);
})(2, 3);

IIFE je sestavljen iz funkcijskega izraza, zavitega v par oklepajev. Za priklic funkcije mu sledite s parom oklepajev zunaj ohišja.

IIFE lahko uporabite za ustvarjanje obsegov, skrivanje podrobnosti izvedbe in skupno rabo podatkov med več skripti. Nekoč so jih uporabljali kot sistem modulov v JavaScriptu.

Ustvarjanje funkcije na veliko različnih načinov

Razumevanje, kako ustvariti funkcije v JavaScriptu, je ključnega pomena. To velja za osnovno funkcijo, ki izvaja preprost izračun, ali za sofisticirano funkcijo, ki je v interakciji z drugimi deli vaše kode.

Zgoraj obravnavane tehnike lahko uporabite za izdelavo funkcij v JavaScriptu ter strukturiranje in organiziranje kode. Izberite pristop, ki najbolj ustreza vašim zahtevam, saj ima vsak različne prednosti in aplikacije.