vaak moeten we een soortgelijke actie uitvoeren op veel plaatsen in het script.
bijvoorbeeld, we moeten een mooi uitziend bericht tonen wanneer een bezoeker inlogt, uitlogt en misschien ergens anders.
functies zijn de belangrijkste “bouwstenen” van het programma. Ze laten de code vele malen worden genoemd zonder herhaling.
we hebben al voorbeelden van ingebouwde functies gezien, zoals alert(message), prompt(message, default) en confirm(question). Maar we kunnen ook eigen functies creëren.,
Function Declaration
om een functie aan te maken kunnen we een function declaration gebruiken.
het ziet er als volgt uit:
function showMessage() { alert( 'Hello everyone!' );} de functionhet sleutelwoord gaat eerst, dan gaat de naam van de functie, dan een lijst met parameters tussen de haakjes (komma gescheiden, leeg in het voorbeeld hierboven) en tenslotte de code van de functie, ook genoemd “de functie lichaam”, tussen krullende beugels.,
function name(parameters) { ...body...}onze nieuwe functie kan worden aangeroepen met zijn naam: showMessage().
bijvoorbeeld:
function showMessage() { alert( 'Hello everyone!' );}showMessage();showMessage(); de aanroep showMessage()voert de code van de functie uit. Hier zullen we de boodschap twee keer zien.
dit voorbeeld toont duidelijk een van de belangrijkste doelen van functies: codeduplicatie vermijden.,
als we ooit het bericht of de manier waarop het wordt getoond moeten veranderen, is het genoeg om de code op één plaats te wijzigen: de functie die het uitzendt.
lokale variabelen
een variabele die binnen een functie wordt gedeclareerd, is alleen zichtbaar binnen die functie.
bijvoorbeeld:
Outer variabelen
een functie kan ook toegang krijgen tot een outer variabele, bijvoorbeeld:
let userName = 'John';function showMessage() { let message = 'Hello, ' + userName; alert(message);}showMessage(); // Hello, JohnDe functie heeft volledige toegang naar de buitenste variabele. Het kan het ook wijzigen.,
bijvoorbeeld:
de buitenste variabele wordt alleen gebruikt als er geen lokale variabele is.
als een variabele met dezelfde naam binnen de functie wordt gedeclareerd, dan schaduwen de buitenste. In de code hieronder gebruikt de functie bijvoorbeeld de lokale userName. De buitenste wordt genegeerd:
variabelen die buiten een functie zijn gedeclareerd, zoals de buitenste userName in de bovenstaande code, worden globaal genoemd.
globale variabelen zijn zichtbaar vanuit elke functie (tenzij shadowed door locals).,
Het is een goede gewoonte om het gebruik van globale variabelen te minimaliseren. Moderne code heeft weinig of geen globalen. De meeste variabelen bevinden zich in hun functies. Soms kunnen ze echter nuttig zijn om gegevens op projectniveau op te slaan.
Parameters
We kunnen willekeurige gegevens doorgeven aan functies met behulp van parameters (ook Functieargumenten genoemd) .
in het voorbeeld hieronder heeft de functie twee parameters: from en text.,
wanneer de functie wordt aangeroepen in regels (*) en (**), worden de gegeven waarden gekopieerd naar lokale variabelen from en text. Dan gebruikt de functie ze.
Hier is nog een voorbeeld: we hebben een variabele from en geven het door aan de functie., Let op: de functie verandert from, maar de verandering wordt niet buiten gezien, omdat een functie altijd een kopie krijgt van de waarde:
standaardwaarden
als een parameter niet wordt opgegeven, wordt de waarde undefined.
bijvoorbeeld, de bovengenoemde functie showMessage(from, text) kan worden aangeroepen met een enkel argument:
showMessage("Ann"); dat is geen fout. Een dergelijke aanroep zou "*Ann*: undefined"uitvoeren., Er is geen text, dus wordt aangenomen dat text === undefined.,
Als we gebruik willen maken van een “standaard” text in dit geval, dan kunnen we opgeven na =:
function showMessage(from, text = "no text given") { alert( from + ": " + text );}showMessage("Ann"); // Ann: no text givenals de text parameter wordt niet doorgegeven, het zal de waarde "no text given"
Hier "no text given" is een string, maar het kan een meer complexe expressie, die alleen beoordeeld en toegewezen als de parameter ontbreekt., Dit is dus ook mogelijk:
in JavaScript wordt elke keer dat de functie wordt aangeroepen zonder de betreffende parameter een standaardparameter geëvalueerd.
in het voorbeeld hierboven wordt anotherFunction() aangeroepen elke keer dat showMessage() wordt aangeroepen zonder de parameter text.
alternatieve standaardparameters
soms is het zinvol om standaardwaarden voor parameters in te stellen, niet in de functiedeclaratie, maar in een later stadium, tijdens de uitvoering ervan.,de parameter kunnen we vergelijken met undefined:
function showMessage(text) { if (text === undefined) { text = 'empty message'; } alert(text);}showMessage(); // empty message…Of kunnen we gebruik maken van de || operator:
// if text parameter is omitted or "" is passed, set it to 'empty'function showMessage(text) { text = text || 'empty'; ...}Moderne JavaScript-engines ondersteunen de nullish samen operator ??, het is beter als falsy waarden, zoals 0, worden geacht regelmatig:
een waarde Retourneren
Een functie kan een waarde terug in de aanroepende code als resultaat.,
het eenvoudigste voorbeeld zou een functie zijn die twee waarden optelt:
function sum(a, b) { return a + b;}let result = sum(1, 2);alert( result ); // 3De richtlijn return kan in elke plaats van de functie. Wanneer de uitvoering het bereikt, stopt de functie en wordt de waarde teruggegeven aan de aanroepende code (toegewezen aan result hierboven).
er kunnen veel gevallen van return voorkomen in een enkele functie. Bijvoorbeeld:
het is mogelijk om return zonder waarde te gebruiken., 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 en de waardeVoor een lange uitdrukking in return, het is misschien verleidelijk om het op een aparte regel, zoals deze:
return (some + long + expression + or + whatever * f(a) + f(b))Dat werkt niet, omdat de JavaScript wordt uitgegaan van een puntkomma na return. Dat werkt hetzelfde als:
return; (some + long + expression + or + whatever * f(a) + f(b))dus wordt het effectief een lege return.,
als we willen dat de geretourneerde expressie over meerdere regels wordt afgebroken, moeten we deze op dezelfde regel starten als return. Of zet op zijn minst de openingshaakjes als volgt:
return ( some + long + expression + or + whatever * f(a) + f(b) )en het zal werken zoals we verwachten.
een functie benoemen
functies zijn acties. Dus hun naam is meestal een werkwoord. Het moet kort zijn, zo nauwkeurig mogelijk en beschrijven wat de functie doet, zodat iemand die de code leest een indicatie krijgt van wat de functie doet.,
Het is een wijdverbreide praktijk om een functie te starten met een verbaal voorvoegsel dat de actie vaag beschrijft. Er moet binnen het team overeenstemming zijn over de Betekenis van de voorvoegsels.
bijvoorbeeld, functies die beginnen met "show" tonen meestal iets.
functie beginnend met…
voorbeelden van dergelijke Namen:
met voorvoegsels op zijn plaats, geeft een blik op een functienaam inzicht in wat voor soort werk het doet en wat voor soort waarde het retourneert.,
een functie moet precies doen wat door zijn naam wordt gesuggereerd, niet meer.
twee onafhankelijke acties verdienen meestal twee functies, zelfs als ze meestal samen worden aangeroepen (in dat geval kunnen we een 3e functie maken die deze twee aanroept).
een paar voorbeelden van het breken van deze regel:
-
getAge– zou slecht zijn als het toont eenalertmet de leeftijd (zou alleen moeten krijgen)., -
createForm– zou slecht zijn als het document wordt gewijzigd door er een formulier aan toe te voegen (zou het alleen moeten aanmaken en retourneren). -
checkPermission– zou slecht zijn als hetaccess granted/deniedbericht weergeeft (alleen de controle uitvoeren en het resultaat retourneren).
Deze voorbeelden gaan uit van gemeenschappelijke betekenissen van voorvoegsels. U en uw team zijn vrij om het eens te worden over andere betekenissen, maar meestal zijn ze niet veel anders. In ieder geval moet u een goed begrip hebben van wat een prefix betekent, wat een prefixed functie wel en niet kan doen., Alle functies met hetzelfde voorvoegsel moeten aan de regels voldoen. En het team moet de kennis delen.
functies die zeer vaak worden gebruikt, hebben soms ultrashort namen.
bijvoorbeeld, het jQuery framework definieert een functie met $. De lodash library heeft zijn kernfunctie genaamd _.
Dit zijn uitzonderingen. Over het algemeen moeten functienamen beknopt en beschrijvend zijn.
functies = = opmerkingen
functies moeten kort zijn en precies één ding doen., Als dat ding groot is, is het misschien de moeite waard om de functie op te splitsen in een paar kleinere functies. Soms is het volgen van deze regel misschien niet zo eenvoudig, maar het is zeker een goede zaak.
een aparte functie is niet alleen gemakkelijker te testen en te debuggen – het bestaan zelf is een geweldige opmerking!
vergelijk bijvoorbeeld de twee functies showPrimes(n) hieronder. Elk voert priemgetallen uit tot n.,
de eerste variant gebruikt een label:
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 }}De tweede variant gebruikt een extra functie isPrime(n) om te testen op primaliteit:
de tweede variant is toch gemakkelijker te begrijpen? In plaats van het codestuk zien we een naam van de actie (isPrime). Soms verwijzen mensen naar dergelijke code als zelf-beschrijvend.
dus, functies kunnen worden gemaakt, zelfs als we niet van plan zijn om ze te hergebruiken. Ze structureren de code en maken het leesbaar.,
samenvatting
een functiedeclaratie ziet er als volgt uit:
function name(parameters, delimited, by, comma) { /* code */}- waarden doorgegeven aan een functie als parameters worden gekopieerd naar de lokale variabelen.
- een functie heeft toegang tot externe variabelen. Maar het werkt alleen van binnen naar buiten. De code buiten de functie ziet zijn lokale variabelen niet.
- een functie kan een waarde retourneren. Als dit niet het geval is, dan is het resultaat
undefined.,
om de code schoon en gemakkelijk te begrijpen te maken, wordt aanbevolen om voornamelijk lokale variabelen en parameters in de functie te gebruiken, niet outer variabelen.
Het is altijd makkelijker om een functie te begrijpen die parameters krijgt, ermee werkt en een resultaat retourneert dan een functie die geen parameters krijgt, maar externe variabelen wijzigt als een neveneffect.
functienaam:
- een naam moet duidelijk beschrijven wat de functie doet. Wanneer we een functie in de code zien, geeft een goede naam ons direct inzicht in wat het doet en retourneert.,
- een functie is een actie, dus functienamen zijn meestal verbaal.
- Er bestaan veel bekende functie-voorvoegsels zoals
create…,show…,get…,check…enzovoort. Gebruik ze om aan te geven wat een functie doet.
functies zijn de belangrijkste bouwstenen van scripts. Nu hebben we de basis besproken, dus we kunnen beginnen met het maken en gebruiken ervan. Maar dat is nog maar het begin van het pad. We zullen er vele malen naar terugkeren, dieper in hun geavanceerde functies.
Geef een reactie