JavaKomentosarjan funktioiden määrittäminen ja kutsuminen esimerkin avulla

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

JavaSkriptifunktiot ryhmittelevät uudelleenkäytettäviä koodilohkoja, jotka suoritetaan vain kutsuttaessa. Tämä ohje näyttää, miten sellainen deklaroidaan, miten siihen välitetään argumentteja ja miten arvo palautetaan kutsujalle.

  • 🔘 Syntaksi: Avainsana function, nimi, sulkeet ja aaltosulkeet määrittelevät jokaisen klassisen funktion.
  • ☑️ Kutsumus: Code funktion sisällä suoritetaan vain, kun funktion nimi kutsutaan sulkeissa.
  • ✅ argumentit: Sulkeiden sisällä olevat arvot välittävät dataa kutsujalta funktion runkoon.
  • 🧪 Palauta: return-avainsana lähettää arvon takaisin kutsujalle ja pysäyttää suorituksen kyseisessä kohdassa.
  • 🛠️ Vaihtoehdot: Deklaraatiot, lausekkeet, nuolifunktiot, IIFE:t ja takaisinkutsufunktiot sopivat kukin eri tilanteeseen.
  • 📊 Soveltamisala: Funktiomäärittelyt nostetaan, kun taas funktiolausekkeet ja nuolifunktiot eivät.
Lue lisää

JavaSkriptien määritys- ja kutsufunktiot

Mitä toiminto sisältää JavaKäsikirjoitus?

Funktiot ovat erittäin tärkeitä ja hyödyllisiä millä tahansa ohjelmointikielellä, koska ne tekevät koodista uudelleenkäytettävän. Funktio on koodilohko, joka suoritetaan vain, jos sitä kutsutaan. Jos sinulla on muutama koodirivi, joita on käytettävä useita kertoja, voit luoda funktion, joka sisältää toistuvat koodirivit, ja kutsua funktiota sitten missä tahansa.

Mikään aaltosulkeiden sisällä oleva koodi ei toimi yksinään. Selain tallentaa lohkon sille antamallasi nimellä, ja koodi suoritetaan vain, kun nimi kirjoitetaan sulkeiden kanssa, kuten myFunction()Toiminnot ovat siis kaiken keskiössä. JavaKäsikirjoitus ohjelma, onko skripti elossa sivun sisällä tai ulkoisessa tiedostossa.

Kuinka luoda funktio sisään JavaKäsikirjoitus

  1. Käytä avainsanaa toiminto perässä funktion nimi.
  2. Avaa ja sulje sulut funktion nimen jälkeen.
  3. Sulujen jälkeen avaa ja sulje kiharat olkaimet.
  4. Kirjoita koodirivit aaltosulkeisiin.

Syntaksi:

function functionname()
{

  lines of code to be executed

}

Alla oleva esimerkki määrittelee myFunction() ja kutsuu sitä sitten heti seuraavalla rivillä, joten viesti tulee näkyviin heti sivun latauduttua. Kokeile tätä itse:

<html>
<head>
	<title>Functions!!!</title>
	<script type="text/javascript">
      function myFunction()
      {
      	document.write("This is a simple function.<br />");
      }
		myFunction();
	</script>
</head>
<body>
</body>
</html>

Toiminto argumenttien kanssa

Voit luoda funktioita myös argumenteilla. Argumentit tulee määrittää sulkeissa.

Syntaksi:

function functionname(arg1, arg2)

{

  lines of code to be executed

}

Tässä countVowels() vastaanottaa minkä tahansa nimen, jonka vierailija kirjoittaa kehotteeseen, käy läpi jokaisen merkin ja raportoi, kuinka monta vokaalia nimi sisältää. Kokeile tätä itse:

<html>
<head>
	<script type="text/javascript">
		var count = 0;
		function countVowels(name)
		{
			for (var i=0;i<name.length;i++)
			{
              if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
              count = count + 1;
			}
		document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
		}
   	 	var myName = prompt("Please enter your name");
    	countVowels(myName);
	</script>
</head>
<body>
</body>
</html>

JavaSkriptin palautusarvo

Voit myös luoda arvoja palauttavia JS-funktioita. Toiminnon sisällä sinun on käytettävä avainsanaa palata sen jälkeen palautettava arvo.

Syntaksi:

function functionname(arg1, arg2)

{

  lines of code to be executed

  return val1;

}

Tässä viimeisessä esimerkissä returnSum() palauttaa summan riville, jolla se kutsuttiin, joten tulos voidaan liittää lauseeseen sen sijaan, että se tulostettaisiin funktion sisällä. Kokeile tätä itse:

<html>
<head>
	<script type="text/javascript">
		function returnSum(first, second)
        {
          var sum = first + second;
          return sum;
        }
      var firstNo = 78;
      var secondNo = 22;
      document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
	</script>
</head>
<body>
</body>
</html>
Älä Miss:

Funktiotyypit JavaKäsikirjoitus

Yllä olevat kolme esimerkkiä käyttävät kaikki klassista funktion määrittelyä, mutta silti modernia JavaScript tarjoaa useita muita muotoja. Ne eroavat toisistaan ​​pääasiassa siinä, nostaako moottori ne ja miten kukin niistä käsittelee this avainsana.

Funktion tyyppi Tyypillinen syntaksi Kun sitä käytetään
Toimintoilmoitus funktio tervehdys() { } Nimetty, uudelleenkäytettävä logiikka; nostettu laajimmalle mahdolliselle tasolle
Funktion lauseke vakio tervehdys = funktio () { }; Funktion tallentaminen muuttujaan; ei nostettuun tilaan
Nuolifunktio (ES6) vakio tervehdys = () => { }; Lyhyet takaisinkutsutoiminnot; perii tämän ympäröivästä laajuusalueesta
Anonyymi funktio setTimeout(funktio () { }, 100); Kertaluonteinen logiikka siirrettiin suoraan toiseen funktioon
IIFE (funktio () { })(); Suoritetaan välittömästi ja pidetään muuttujat yksityisinä
Takaisinsoitto items.forEach(näytäKohde); Funktio, joka on annettu toiselle funktiolle ja jota kutsutaan myöhemmin

Huomautus yllä olevista esimerkeistä: historialliset näytteet käyttävät var ja document.write(), ja molemmat toimivat edelleen jokaisessa selaimessa. Nykykäytäntönä muuttujien määrittelyssä käytetään let or const ja tulostaa tulosteen kautta console.log() tai asettamalla textContent elementin kohdalla, koska document.write() pyyhkii sivun, joka on jo latautunut. type="text/javascript" Attribuutti on myös valinnainen HTML5:ssä.

Funktioparametrit, argumentit ja oletusarvot

Parametrit ovat määritelmässä lueteltuja paikkamerkkien nimiä, kun taas argumentit ovat funktion kutsumisen yhteydessä annettuja reaaliarvoja. countVowels(name) edellä, name on parametri ja kehotteeseen kirjoitettu teksti on argumentti.

function greet(user, greeting = "Hello")
{
  return greeting + ", " + user;
}

greet("Ann");
greet("Ann", "Welcome");
  • Parametri, jolla ei ole vastaavaa argumenttia, muuttuu undefined ellei oletusarvoa anneta, kuten greeting on täällä.
  • Parametriluettelo jättää ylimääräiset argumentit huomiotta, mutta ne pysyvät saatavilla funktion kautta. arguments objekti minkä tahansa muun kuin nuolifunktion sisällä.
  • Lepoparametri kirjoitettuna muodossa ...values kerää kaikki jäljellä olevat argumentit aidoksi ryhmä.

Toiminnan laajuus ja nosto JavaKäsikirjoitus

Funktion kirjoituspaikka määrää, mitä se voi nähdä ja milloin sitä voidaan kutsua. Kaksi sääntöä selittää lähes kaikki aloittelijoiden kohtaamat yllätykset.

  • Nosto: Funktiomäärittelyt siirretään laajuusalueensa alkuun ennen skriptin suorittamista, joten niitä voidaan kutsua määritelmän yläpuolella olevalla rivillä. Funktiolausekkeita ja nuolifunktioita ei nosteta ja ne heittävät virheen, jos niitä kutsutaan aikaisin.
  • Soveltamisala: muuttujat, jotka on ilmoitettu var funktion sisällä ovat näkyvissä koko funktiossa, kun taas let ja const rajoittuvat siihen lohkoon, jossa ne sijaitsevat. Kaikki funktioiden ulkopuolella ilmoitetut arvot ovat globaaleja.

Vokaalilaskuri osoittaa tämän käytännössä. Sen count muuttuja deklaroidaan funktion ulkopuolella, joten kutsuminen countVowels() Toisella kerralla samalla sivulla jatketaan yhteenlaskua aiempaan kokonaissummaan sen sijaan, että se aloittaisi uudelleen nollasta. Määrittelyn siirtäminen funktion sisällä nollaisi sen jokaisella kutsukerralla.

Nämä scoping säännöt siirtyvät myös palvelinpuolen koodiin, minkä vuoksi sama perustelu pätee, kun funktioita kirjoitetaan Node.jsja miksi funktion käyttäytyminen esiintyy niin usein JavaKäsikirjoitushaastattelukysymykset.

UKK

Funktio toimii edelleen, mutta se luovuttaa takaisin undefinedKutsun liittäminen muuttujaan tallentaa undefined, minkä vuoksi summaesimerkissä käytetään return-funktiota sen sijaan, että se tulostaisi kokonaissumman funktion rungon sisällä.

Tekoälyavustajat voivat ehdottaa funktion runkoa kommentista, selittää epätavallisen takaisinkutsutoiminnon rivi riviltä ja ehdottaa testisyötteitä. Suorita ehdotus aina, koska luotu koodi voi hiljaa olettaa muuttujan tai selaimen API:n, jota sivu ei tarjoa.

Yleensä kyllä. GitHub Copilot täydentää nuolen syntaksin ja yleiset takaisinkutsumallit kontekstista. Tarkista arvon this tuloksessa, koska nuolifunktio perii sen, kun taas klassinen funktiolauseke ei.

Sulkemisfunktio on funktio, joka on yhdistetty ulkoisiin muuttujiin, joihin se viittasi luodessaan. Sisäfunktio jatkaa näiden muuttujien lukemista myös ulkofunktion päättymisen jälkeen, mikä on tapa, jolla yksityiset laskurit ja tehdasfunktiot rakennetaan.

Kyllä, ja sitä kutsutaan rekursioksi. Funktion on sisällettävä perustapaus, joka pysäyttää ketjun, muuten selain antaa aluevirheen, kun kutsupino on käytetty loppuun. Rekursio sopii puussa kävelyyn ja kertomatyyppisiin ongelmiin.

Asynkroninen funktio palauttaa aina promise-arvon. Sen sisällä await-funktio keskeyttää funktion, kunnes odotettu promise-arvo täyttyy, jolloin asynkroninen koodi voi lukea sivun ylhäältä alas. Loput sivusta vastaa odottaessaan.

Liitä se tapahtumakuuntelijaan: valitse painike ja kutsu sitten addEventListener-funktiota tapahtuman nimellä ja funktion viittauksella. Vanhempi inline-onclick-attribuutti toimii myös, vaikkakin merkintöjen erottaminen käyttäytymisestä on nyt parempi vaihtoehto.

Sulkeet kutsuvat sitä välittömästi ja tuottavat sen tuloksen. Pelkän nimen kirjoittaminen välittää itse funktion, jota tarvitaan takaisinkutsuissa. Sulkeiden lisääminen vahingossa setTimeout-funktion sisälle suorittaa koodin heti eikä myöhemmin.

Tiivistä tämä viesti seuraavasti: