Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Funktsioon on korduvkasutatav koodilõik, mis käivitatakse selle käivitamisel. Funktsioonid võimaldavad teil koodi uuesti kasutada, muutes selle modulaarsemaks ja hõlpsamini hooldatavaks.

Funktsioonide loomiseks JavaScriptis on mitu võimalust. Siit saate teada, kuidas erinevaid funktsioone luua ja kuidas neid kasutada.

Funktsioonide deklaratsioonid: otsekohene viis

Üks võimalus JavaScriptis funktsioonide loomiseks on funktsioonideklaratsioonid. Funktsiooni deklaratsioon on JavaScripti funktsioon, mis järgib allolevat süntaksit.

funktsioonifunktsiooniNimi(parameetrid) {
// kood läheb siia...
tagasi"See on funktsiooni deklaratsioon";
}

Ülaltoodud koodiploki komponendid hõlmavad järgmist:

  • The funktsiooni märksõna: see märksõna deklareerib funktsiooni.
  • funktsiooniNimi: See on funktsiooni nimi. Praktikas peaks see olema võimalikult kirjeldav ja sisukas, näidates ära, mida funktsioon teeb.
    • instagram viewer
  • parameetrid: see tähistab funktsiooni parameetreid. Parameetrid on valikuline muutujate loend, mille saate funktsiooni kutsumisel edasi anda.
  • Funktsiooni keha: see sisaldab koodi, mida funktsioon käivitab, kui seda kutsute. Seda ümbritsevad lokkis traksid {} ja võib sisaldada mis tahes kehtivat JavaScripti koodi.
  • The tagasi avaldus: see avaldus peatab funktsiooni täitmise ja tagastab määratud väärtuse. Ülaltoodud juhul tagastaks funktsiooni kutsumine stringi "See on funktsiooni deklaratsioon".

Näiteks allolev funktsioonideklaratsioon võtab parameetritena kolm arvu ja tagastab nende summa.

funktsioonilisaKolmNumbreid(a, b, c) {
tagasi a + b + c;
}

Funktsiooni deklaratsiooni kutsumiseks JavaScriptis kirjutage funktsiooni nimi, millele järgneb sulgude komplekt (). Kui funktsioon võtab mingeid parameetreid, edastage need argumentidena sulgudes.

Näiteks:

addThreeNumbers(1, 2, 3) // 6

Ülaltoodud koodiplokk kutsub üles addThreeNumber funktsioonid ja edastab funktsioonile argumentidena 1, 2 ja 3. Kui käivitate selle koodi, tagastab see väärtuse 6.

JavaScripti tõstukid funktsioonideklaratsioonid, mis tähendab, et saate neid enne defineerimist välja kutsuda.

Näiteks:

isHoisted(); // Funktsioon on tõstetud
funktsiooniisHoisted() {
konsool.log("Funktsioon on tõstetud");
tagasitõsi;
}

Nagu ülaltoodud koodiplokis näidatud, helistatakse isHoisted enne määratlemist ei tekitaks viga.

Funktsiooniväljendid: funktsioonid väärtustena

JavaScriptis saate funktsiooni avaldisena määratleda. Seejärel saate määrata funktsiooni väärtuse muutujale või kasutada seda mõne teise funktsiooni argumendina.

Neid nimetatakse ka anonüümseteks funktsioonideks, kuna neil pole nimesid ja saate neid kutsuda ainult muutujast, millele olete need määranud.

Allpool on funktsiooniavaldise süntaks:

konst funktsiooninimi = funktsiooni () {
tagasi"Funktsiooni avaldis";
};

Funktsiooniavaldise kutsumiseks JavaScriptis kirjutage funktsioonile määratud muutuja nimi, millele järgneb sulgude komplekt (). Kui funktsioon võtab mingeid parameetreid, edastage need argumentidena sulgudes.

Näiteks:

funktsiooniNimi(); // Funktsiooni avaldis

Funktsiooniavaldised on kasulikud teistes funktsioonides töötavate funktsioonide loomisel. Tüüpilised näited hõlmavad sündmuste käitlejaid ja nende tagasihelistusi.

Näiteks:

button.addEventListener("klõpsake", funktsiooni (sündmus) {
konsool.log("Sa vajutasid nuppu!");
});

Ülaltoodud näites kasutati funktsiooniavaldist, mis võtab a sündmus argument kui tagasikutse addEventListener funktsiooni. Kui kasutate funktsiooniavaldist tagasihelistamisena, ei pea te seda funktsiooni otse välja kutsuma. Sellele kutsutakse automaatselt välja selle vanemfunktsioon.

Ülaltoodud juhul, kui sündmusekuulaja saab a klõpsa sündmuse korral kutsub see tagasi helistamisfunktsiooni ja edastab selle sündmus objekt argumendina.

Erinevalt funktsioonide deklaratsioonidest ei tõsteta funktsiooniavaldisi üles, seega ei saa te neid enne defineerimist välja kutsuda. Kui proovite funktsiooni avaldisele juurde pääseda enne selle määratlemist, on tulemuseks a Viiteviga.

Näiteks:

isHoisted(); // ReferenceError: 'isHoisted' ei pääse enne lähtestamist juurde
konst isHoisted = funktsiooni () {
konsool.log("Funktsioon on tõstetud");
};

Noolefunktsioonid: kompaktne ja piiratud

ES6 tutvustas anonüümsete funktsioonide kirjutamiseks JavaScripti stenogrammi, mida nimetatakse noolefunktsioonideks. Neil on lühike süntaks, mis muudab teie koodi loetavamaks, eriti kui tegemist on lühikeste üherealiste funktsioonidega.

Erinevalt teistest funktsioonide loomise meetoditest ei nõua noolefunktsioonid funktsiooni märksõna. Noolefunktsiooni avaldis koosneb kolmest osast:

  • Paar sulgu (()), mis sisaldab parameetreid. Kui funktsioonil on ainult üks parameeter, võite sulud välja jätta.
  • Nool (=>), mis koosneb võrdusmärgist (=) ja suurem kui märk (>).
  • Funktsiooni keha sisaldav lokkis trakside paar. Kui funktsioon koosneb ühest avaldisest, võite kõverad sulud välja jätta.

Näiteks:

// Üks parameeter, kaudne tulu
konst funktsiooninimi = parameeter =>konsool.log("Ühe parameetri noole funktsioon")
// Mitu parameetrit, selge tagastus
konst funktsiooninimi = (parameeter_1, parameeter_2) => {
tagasi"Mitme parameetri noole funktsioon"
};

Kui jätate lokkis sulud välja, tagastab noolefunktsioon kaudselt üksiku avaldise, seega pole vaja tagasi märksõna. Teisest küljest, kui te lokkis sulgusid välja ei jäta, peate selgesõnaliselt tagastama väärtuse, kasutades tagasi märksõna.

Noolefunktsioonid on samuti erinevad see siduv võrreldes tavaliste funktsioonidega. Tavalistes funktsioonides on väärtus see oleneb sellest, kuidas funktsiooni kutsute. Noolefunktsioonis see on alati seotud see ümbritseva ulatuse väärtus.

Näiteks:

konst foo = {
 nimi: "Dave",
 tervitan: funktsiooni () {
 setTimeout(() => {
konsool.log(`Tere, minu nimi on ${see.name}`);
 }, 1000);
 },
};
foo.greet(); // Logib 1 sekundi pärast "Tere, minu nimi on Dave".

Ülaltoodud näites on noolefunktsioon sees tervitada meetodil on juurdepääs see.nimi, kuigi setTimeout funktsioon kutsub seda. Tavalisel funktsioonil oleks oma see seotud globaalse objektiga.

Nagu nimigi viitab, on kohe kutsutav funktsioon (IIFE) funktsioon, mis töötab kohe pärast selle määratlemist.

Siin on IIFE struktuur:

(funktsiooni () {
// kood siin
})();
(() => {
// kood siin
})();
(funktsiooni (param_1, param_2) {
konsool.log (param_1 * param_2);
})(2, 3);

IIFE koosneb funktsiooniavaldisest, mis on ümbritsetud sulgudes. Funktsiooni käivitamiseks järgige seda väljaspool korpust olevate sulgudega.

Saate kasutada IIFE-sid ulatuste loomiseks, juurutamise üksikasjade peitmiseks ja andmete jagamiseks mitme skripti vahel. Kunagi kasutati neid a moodulite süsteem JavaScriptis.

Funktsiooni loomine mitmel erineval viisil

JavaScriptis funktsioonide loomise mõistmine on ülioluline. See kehtib põhifunktsiooni kohta, mis teostab lihtsat arvutust või keerukat funktsiooni, mis suhtleb teie koodi muude osadega.

Saate kasutada ülalkirjeldatud tehnikaid JavaScriptis funktsioonide loomiseks ning koodi struktureerimiseks ja korraldamiseks. Valige oma nõudmistele kõige paremini vastav lähenemisviis, kuna igal neist on erinevad eelised ja rakendused.