Ganske ofte vi trenger for å utføre en lignende aksjon i mange steder av skriptet.
For eksempel, vi trenger å vise en pen melding når en besøkende logger inn, logger deg ut og kanskje et annet sted.
Funksjoner er hoved – «byggesteiner» i programmet. De lar kode for å bli kalt mange ganger uten repetisjon.
Vi har allerede sett eksempler innebygde funksjoner, som alert(message)
, prompt(message, default)
og confirm(question)
. Men vi kan lage funksjoner av våre egne, så vel.,
Funksjon Erklæring
for Å lage en funksjon vi kan bruke en funksjon erklæring.
Det ser ut som dette:
– >
function showMessage() { alert( 'Hello everyone!' );}
function
søkeord som går først, deretter går inn navnet på funksjonen, og deretter en liste over parametere mellom parentesene (komma-separert, tom i eksemplet ovenfor) og til slutt koden for funksjonen, også kalt «funksjonen kroppen», mellom krøllparentes.,
– >
function name(parameters) { ...body...}
Vår nye funksjonen kan bli kalt ved sitt navn: showMessage()
.
For eksempel:
– >
function showMessage() { alert( 'Hello everyone!' );}showMessage();showMessage();
ring showMessage()
utfører koden for funksjonen. Her vil vi se meldingen to ganger.
Dette eksemplet viser klart en av de viktigste formålene med funksjoner: for å unngå koden duplisering.,
Hvis vi trenger å endre meldingen, eller slik det er vist, er det nok til å endre koden på ett sted: funksjonen som produserer det.
Lokale variabler
En variabel deklarert inne i en funksjon bare er synlig inne som fungerer.
For eksempel slik:
Ytre variabler
En funksjon kan få tilgang til en ytre variable, for eksempel:
– >
let userName = 'John';function showMessage() { let message = 'Hello, ' + userName; alert(message);}showMessage(); // Hello, John
Den funksjonen har full tilgang til den ytre variable. Det kan endre den så godt.,
For eksempel:
Den ytre variable brukes bare hvis det ikke er lokale.
Hvis en av samme navn variabel er deklarert inne i funksjon så det skygger den ytre. For eksempel, i den koden nedenfor funksjonen bruker lokal userName
. Den ytre blir ignorert:
Variabler deklarert utenfor en funksjon, for eksempel ytre userName
i koden ovenfor er kalt global.
Globale variabler er synlig fra enhver funksjon (med mindre skygget av lokalbefolkningen).,
Det er en god praksis for å redusere bruken av globale variabler. Moderne koden har få eller ingen globals. De fleste variabler som bor i deres funksjoner. Noen ganger, skjønt, de kan være nyttige for å lagre prosjekt-nivå data.
Parametere
Vi kan gi vilkårlige data til funksjoner ved hjelp av parametre (også kalt funksjon argumenter) .
I eksempelet nedenfor, funksjonen har to parametere: from
og text
.,
Når funksjonen kalles i linjer (*)
og (**)
, det er gitt verdier er kopiert til lokale variabler from
og text
. Deretter funksjonen bruker dem.
Her er ett eksempel: vi har en variabel from
og gi det til funksjonen., Vennligst merk: funksjonen endres from
, men endringen er ikke sett på utsiden, fordi en funksjon alltid får en kopi av verdi:
Standard
Hvis en parameter er ikke gitt, da dens verdi blir undefined
.
For eksempel, nevnte funksjon showMessage(from, text)
kan kalles opp med et enkelt argument:
– >
showMessage("Ann");
Det er ikke en feil. En slik samtale ville ut "*Ann*: undefined"
., Det er ingen text
, så det er antatt at text === undefined
.,
Hvis vi ønsker å bruke en «standard» text
i dette tilfellet, så kan vi angi det etter at =
:
– >
function showMessage(from, text = "no text given") { alert( from + ": " + text );}showMessage("Ann"); // Ann: no text given
Nå om den text
parameteren er ikke bestått, det vil få verdi "no text given"
Her "no text given"
er en streng, men det kan være en mer komplekse uttrykk, som bare er vurdert og tildelt hvis parameteren mangler., Så, dette er også mulig:
– >
I JavaScript, er en standard parameter er evaluert hver gang funksjonen kalles opp uten den aktuelle parameteren.
I eksempelet ovenfor, anotherFunction()
kalles hver gang showMessage()
kalles uten text
– parameteren.
Alternativ standard parametere
noen Ganger er det fornuftig å sette standard verdier for parametere som ikke er i funksjon erklæring, men på et senere tidspunkt, når den kjøres.,parameteren, kan vi sammenligne det med undefined
:
– >
function showMessage(text) { if (text === undefined) { text = 'empty message'; } alert(text);}showMessage(); // empty message
…Eller vi kan bruke ||
operatør:
– >
// if text parameter is omitted or "" is passed, set it to 'empty'function showMessage(text) { text = text || 'empty'; ...}
Moderne JavaScript motorer støtte nullish coalescing operatør ??
, det er bedre når falsy verdier, som for eksempel 0
, er ansett som vanlig:
Returnerer en verdi på
En funksjon kan returnere en verdi tilbake i ringer code som resultat.,
Den enkleste eksempel ville være en funksjon som summerer to verdier:
– >
function sum(a, b) { return a + b;}let result = sum(1, 2);alert( result ); // 3
direktivet return
kan være i hvilket som helst sted i funksjon. Når utførelsen når det, funksjon stopper, og den verdien som blir returnert til den som ringer-kode (som er tilordnet til result
ovenfor).
Det kan være mange forekomster av return
i en enkelt funksjon. For eksempel:
Det er mulig å bruke return
uten verdi., That causes the function to exit immediately.
For example:
function showMovie(age) { if ( !checkAge(age) ) { return; } alert( "Showing you the movie" ); // (*) // ...}
In the code above, if checkAge(age)
returns false
, then showMovie
won’t proceed to the alert
.,
return
og verdienFor en lang uttrykk i return
, kan det være fristende å sette den på en egen linje, slik som dette:
– >
return (some + long + expression + or + whatever * f(a) + f(b))
Som ikke fungerer, fordi JavaScript forutsetter et semikolon etter return
. Det vil fungere den samme som:
– >
return; (some + long + expression + or + whatever * f(a) + f(b))
Så, det effektivt blir et tomt tilbake.,
Hvis vi vil ha den tilbake uttrykk for å brytes over flere linjer, bør vi starte den på samme linje som return
. Eller i det minste sette åpne parenteser det som følger:
– >
return ( some + long + expression + or + whatever * f(a) + f(b) )
Og det vil fungere akkurat som vi forventer.
Navngi en funksjon
Funksjoner handlinger. Så deres navn er vanligvis et verb. Det bør være kort, så nøyaktig som mulig og å beskrive hva funksjonen gjør, slik at noen leser koden får en indikasjon på hva funksjonen gjør.,
Det er en utbredt praksis å starte en funksjon med en verbal prefiks som vagt beskriver handlingen. Det må være en enighet i teamet om betydningen av prefikser.
For eksempel, fungerer som starter med "show"
vanligvis vise noe.
– Funksjonen starter med…
Eksempler på slike navn:
Med prefikser i sted, et blikk på navnet på en funksjon gir en forståelse av hva slags arbeid det gjør det, og hva slags verdi det tilbake.,
En funksjon skal gjøre akkurat det som er foreslått av navnet, er ikke mer.
To uavhengige handlinger vanligvis fortjener to funksjoner, selv om de er vanligvis kalt sammen (i så fall kan vi gjøre en 3. funksjon som samtaler de to).
Et par eksempler for å bryte denne regelen:
-
getAge
– ville være ille hvis det viser enalert
med alder (må bare få)., -
createForm
– ville være ille hvis det endrer dokumentet, og legge til et skjema for å i det (skulle bare lage det og gå tilbake). -
checkPermission
– ville være ille hvis det viseraccess granted/denied
melding (bare skal utføre kontrollen og returnere resultatet).
Disse eksemplene forutsetter felles betydninger av prefikser. Du og ditt team er gratis å bli enige om andre betydninger, men vanligvis er de ikke mye annerledes. I alle fall, du bør ha en god forståelse av hva et prefiks som betyr, hva et prefiks funksjonen kan og ikke kan gjøre., Alle med samme prefiks funksjoner bør følge reglene. Og laget skal dele kunnskap.
Funksjoner som brukes svært ofte noen ganger har ultrashort navn.
For eksempel, jQuery rammeverket definerer en funksjon med $
. Den Lodash biblioteket har sin kjerne funksjon som heter _
.
Dette er unntak. Generelt funksjoner navnene skal være konsis og beskrivende.
Funksjoner == Kommentarer
Funksjoner bør være kort og gjøre nøyaktig én ting., Hvis det er stor, kanskje det er verdt det for å split funksjonen til noen mindre funksjoner. Noen ganger etter denne regelen kan ikke være så lett, men det er definitivt en god ting.
En egen funksjon er ikke bare enklere å teste og feilsøke – dens eksistens er en flott kommentar!
For eksempel, kan du sammenligne de to funksjonene showPrimes(n)
nedenfor. Hver og en utganger primtall opp til n
.,
Den første varianten bruker en etikett:
– >
function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; } alert( i ); // a prime }}
Den andre varianten bruker en ekstra funksjon isPrime(n)
for å teste for primality:
Den andre varianten er enklere å forstå, er det ikke? I stedet for koden stykket ser vi et navn på tiltak (isPrime
). Noen ganger kan folk se slik kode som selv beskriver.
Så, funksjoner kan lages selv om vi ikke har tenkt å bruke dem på nytt. De strukturere koden og gjøre den lesbar.,
Oppsummering
En funksjon erklæring ser ut som dette:
– >
function name(parameters, delimited, by, comma) { /* code */}
- Verdiene gått til en funksjon som parametre er kopiert til sin lokale variabler.
- En funksjon kan få tilgang til ytre variabler. Men det fungerer bare fra innsiden og ut. Koden utenfor funksjonen ikke se sin lokale variabler.
- En funksjon kan returnere en verdi. Hvis det ikke gjør det, så resultatet er
undefined
.,
for Å gjøre koden ren og enkel å forstå, er det anbefalt å bruke hovedsakelig lokale variabler og parametere i funksjon, ikke ytre variabler.
Det er alltid lettere å forstå en funksjon som blir parametre, arbeider med dem, og returnerer et resultat enn en funksjon som blir ingen parametere, men endrer ytre variabler som en bivirkning.
Funksjon navn:
- Et navn skal tydelig beskrive hva funksjonen gjør. Når vi ser en funksjon ringe i koden, et godt navn umiddelbart gir oss en forståelse av hva det gjør og avkastning.,
- En funksjon er en handling, slik funksjon navn er vanligvis muntlig.
- Det finnes mange kjente funksjonen prefikser som
create…
,show…
,get…
,check…
og så videre. Bruk dem til å antyde hva en funksjon gjør.
Funksjoner er de viktigste byggesteinene i skript. Nå har vi dekket det grunnleggende, slik at vi faktisk kan begynne å opprette og bruke dem. Men det er bare begynnelsen av banen. Vi kommer til å gå tilbake til dem mange ganger, å gå dypere inn i deres avanserte funksjoner.
Legg igjen en kommentar