Funktio on uudelleenkäytettävä koodinpätkä, joka suoritetaan, kun kutsut sen. Toimintojen avulla voit käyttää koodia uudelleen, mikä tekee siitä modulaarisemman ja helpompi ylläpitää.
JavaScriptissä on useita tapoja luoda toimintoja. Täällä opit eri tapoja luoda toimintoja ja miten niitä käytetään.
Tehtäväilmoitukset: Suoraviivainen tapa
Yksi tapa luoda funktioita JavaScriptissä on funktiomääritykset. Funktiomääritys on JavaScriptin funktio, joka noudattaa alla olevaa syntaksia.
toimintoFunctionName(parametrit) {
// koodi menee tänne...
palata"Tämä on funktioilmoitus";
}
Yllä olevan koodilohkon komponentteja ovat:
- The toiminto avainsana: Tämä avainsana ilmoittaa funktion.
- FunctionName: Tämä on funktion nimi. Käytännössä sen tulee olla mahdollisimman kuvaava ja mielekäs ja osoittaa, mitä toiminto tekee.
- parametrit: Tämä edustaa toimintoparametreja. Parametrit ovat valinnainen luettelo muuttujista, jotka voit välittää funktiolle, kun kutsut sitä.
- Funktion runko: Tämä sisältää koodin, jonka funktio suorittaa, kun kutsut sitä. Sitä ympäröivät kiharat olkaimet {} ja se voi sisältää minkä tahansa kelvollisen JavaScript-koodin.
- The palata lauseke: Tämä lauseke pysäyttää funktion suorittamisen ja palauttaa määritetyn arvon. Yllä olevassa tapauksessa funktion kutsuminen palauttaisi merkkijonon "Tämä on funktion määritys".
Esimerkiksi alla oleva funktion määrittely ottaa parametreiksi kolme numeroa ja palauttaa niiden summan.
toimintolisääKolmeNumeroa(a, b, c) {
palata a + b + c;
}
Kutsuaksesi funktion määrityksen JavaScriptissä, kirjoita funktion nimi ja sen jälkeen joukko sulkuja (). Jos funktio ottaa parametreja, välitä ne argumenteina suluissa.
Esimerkiksi:
addThreeNumbers(1, 2, 3) // 6
Yllä oleva koodilohko kutsuu addThreeNumber funktioita ja välittää 1, 2 ja 3 argumenteiksi funktiolle. Jos suoritat tämän koodin, se palauttaa arvon 6.
JavaScript-nostimet funktiomäärittelyjä, mikä tarkoittaa, että voit kutsua niitä ennen kuin määrität ne.
Esimerkiksi:
isHoisted(); // Toiminto on nostettu
toimintoisHoisted() {
konsoli.Hirsi("Toiminto on nostettu");
palatatotta;
}
Kuten yllä olevassa koodilohkossa näkyy, soitetaan isHoisted ennen sen määrittämistä ei aiheuttaisi virhettä.
Funktiolausekkeet: Toimii arvoina
JavaScriptissä voit määrittää funktion lausekkeeksi. Voit sitten määrittää funktion arvon muuttujalle tai käyttää sitä argumenttina toiselle funktiolle.
Niitä kutsutaan myös anonyymeiksi funktioiksi, koska niillä ei ole nimiä ja voit kutsua niitä vain muuttujasta, jolle olet määrittänyt ne.
Alla on funktiolausekkeen syntaksi:
konst FunctionName = toiminto () {
palata"Funktion ilmaisu";
};
Kutsuaksesi funktiolauseketta JavaScriptissä, kirjoita funktiolle antamasi muuttujan nimi ja sen jälkeen joukko sulkuja (). Jos funktio ottaa parametreja, välitä ne argumenteina suluissa.
Esimerkiksi:
FunctionName(); // Funktiolauseke
Funktiolausekkeet ovat käteviä luotaessa funktioita, jotka toimivat muissa funktioissa. Tyypillisiä esimerkkejä ovat tapahtumakäsittelijät ja niiden takaisinkutsut.
Esimerkiksi:
button.addEventListener("klikkaus", toiminto (tapahtuma) {
konsoli.Hirsi("Sinä painat nappia!");
});
Yllä olevassa esimerkissä käytettiin funktiolauseketta, joka ottaa an tapahtuma argumentti takaisinsoittona addEventListener toiminto. Sinun ei tarvitse kutsua funktiota eksplisiittisesti, kun käytät funktiolauseketta takaisinkutsuna. Sen ylätoiminto kutsuu sitä automaattisesti.
Yllä olevassa tapauksessa, kun tapahtuman kuuntelija vastaanottaa a klikkaus tapahtuma, se kutsuu takaisinsoittotoiminnon ja välittää tapahtuma vastusta argumenttina.
Toisin kuin funktiomääritykset, funktiolausekkeita ei nosteta, joten et voi kutsua niitä ennen kuin olet määrittänyt ne. Jos yritetään käyttää funktiolauseketta ennen sen määrittämistä, tuloksena on a ReferenceError.
Esimerkiksi:
isHoisted(); // ReferenceError: "isHoisted" ei voi käyttää ennen alustusta
konst isHoisted = toiminto () {
konsoli.Hirsi("Toiminto on nostettu");
};
Nuolitoiminnot: Kompakti ja rajoitettu
ES6 esitteli lyhenteen anonyymien funktioiden kirjoittamiseen JavaScriptiin, jota kutsutaan nuolifunktioiksi. Niillä on ytimekäs syntaksi, joka voi tehdä koodistasi luettavamman, varsinkin kun käsitellään lyhyitä yksirivisiä toimintoja.
Toisin kuin muut funktioiden luontitavat, nuolifunktiot eivät vaadi toiminto avainsana. Nuolifunktiolauseke koostuu kolmesta osasta:
- Sulkupari (()), joka sisältää parametrit. Voit jättää sulkeet pois, jos funktiolla on vain yksi parametri.
- Nuoli (=>), joka koostuu yhtäläisyysmerkistä (=) ja suurempi kuin merkki (>).
- Pari kiharat henkselit, jotka sisältävät funktiorungon. Voit jättää aaltosulkeet pois, jos funktio koostuu yhdestä lausekkeesta.
Esimerkiksi:
// Yksi parametri, implisiittinen palautus
konst FunctionName = parametri =>konsoli.Hirsi("Yksiparametrin nuolitoiminto")
// Useita parametreja, eksplisiittinen palautus
konst FunctionName = (parametri_1, parametri_2) => {
palata"Moniparametrinen nuolitoiminto"
};
Kun jätät pois kiharat aaltosulkeet, nuolifunktio palauttaa implisiittisesti yksittäisen lausekkeen, joten sinun ei tarvitse palata avainsana. Toisaalta, jos et jätä pois kiharat aaltosulkeet, sinun on nimenomaisesti palautettava arvo käyttämällä palata avainsana.
Nuolitoiminnoilla on myös erilainen Tämä sitova verrattuna tavallisiin toimintoihin. Tavallisissa funktioissa arvo Tämä riippuu siitä, miten kutsut funktiota. Nuolifunktiossa Tämä on aina sidottu Tämä ympäröivän laajuuden arvo.
Esimerkiksi:
konst foo = {
nimi: "Dave",
tervehtiä: toiminto () {
setTimeout(() => {
konsoli.Hirsi(`Hei, minun nimeni on ${Tämä.nimi}`);
}, 1000);
},
};
foo.greet(); // Loki "Hei, nimeni on Dave" 1 sekunnin kuluttua
Yllä olevassa esimerkissä nuolitoiminto sisällä tervehtiä menetelmällä on pääsy Tämä nimi, vaikka setTimeout toiminto kutsuu sitä. Normaalilla toiminnolla olisi omansa Tämä sidottu globaaliin objektiin.
Kuten nimestä käy ilmi, välittömästi kutsuttava funktio (IIFE) on funktio, joka suoritetaan heti, kun se on määritetty.
Tässä on IIFE: n rakenne:
(toiminto () {
// koodi täällä
})();(() => {
// koodi täällä
})();
(toiminto (param_1, param_2) {
konsoli.log (param_1 * param_2);
})(2, 3);
IIFE koostuu funktiolausekkeesta, joka on kääritty sulkuparin sisään. Seuraa sitä suluilla kotelon ulkopuolella käynnistääksesi toiminnon.
Voit käyttää IIFE: itä laajuuksien luomiseen, toteutustietojen piilottamiseen ja tietojen jakamiseen useiden komentosarjojen välillä. Niitä käytettiin aikoinaan mm moduulijärjestelmä JavaScriptissä.
Toiminnon luominen monilla eri tavoilla
JavaScriptin funktioiden luomisen ymmärtäminen on ratkaisevan tärkeää. Tämä pätee perusfunktioon, joka suorittaa yksinkertaisen laskennan tai kehittyneen funktion, joka on vuorovaikutuksessa koodisi muiden osien kanssa.
Voit käyttää yllä mainittuja tekniikoita funktioiden rakentamiseen JavaScriptiin sekä koodin jäsentämiseen ja järjestämiseen. Valitse vaatimuksiisi parhaiten sopiva lähestymistapa, sillä jokaisella on erilaisia etuja ja sovelluksia.
