JavaScript Definer & Call-funktioner med eksempel
James Hartman
⚡ Smart opsummering
JavaScriptfunktioner grupperer genbrugelige kodeblokke, der kun kører, når de kaldes, og denne gennemgang viser, hvordan man deklarerer en, sender argumenter til den og returnerer en værdi tilbage til kalderen.
Hvad er funktion i JavaManuskript?
Funktioner er meget vigtige og nyttige i ethvert programmeringssprog, da de gør koden genbrugelig. En funktion er en kodeblok, der kun udføres, hvis den kaldes. Hvis du har et par linjer kode, der skal bruges flere gange, kan du oprette en funktion, der indeholder de gentagne linjer kode, og derefter kalde funktionen, hvor du vil.
Intet inden for parenteserne kører af sig selv. Browseren gemmer blokken under det navn, du gav den, og koden udføres kun, når dette navn er skrevet med parenteser efter det, f.eks. myFunction()Funktioner er derfor i centrum for enhver JavaScript program, om scriptet lever inde på siden eller i en ekstern fil.
Sådan opretter du en funktion i JavaScript
- Brug søgeordet funktion efterfulgt af navnet på funktionen.
- Åbn og luk parenteser efter funktionsnavnet.
- Efter parentes åbnes og lukkes krøllede seler.
- Inden for krøllede seler skal du skrive dine kodelinjer.
Syntaks:
function functionname()
{
lines of code to be executed
}
Eksemplet nedenfor definerer myFunction() og kalder den derefter på den allerførste linje, så beskeden vises, så snart siden indlæses. Prøv selv dette:
<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>
Funktion med argumenter
Du kan også oprette funktioner med argumenter. Argumenter skal angives i parenteser.
Syntaks:
function functionname(arg1, arg2)
{
lines of code to be executed
}
Her countVowels() modtager det navn, som den besøgende skriver i prompten, gennemgår hvert tegn og rapporterer, hvor mange vokaler navnet indeholder. Prøv dette selv:
<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>
JavaScriptreturværdi
Du kan også oprette JS-funktioner, der returnerer værdier. Inde i funktionen skal du bruge søgeordet afkast efterfulgt af den værdi, der skal returneres.
Syntaks:
function functionname(arg1, arg2) { lines of code to be executed return val1; }
I dette sidste eksempel returnSum() sender summen tilbage til den linje, der kaldte den, så resultatet kan sammenføjes til en sætning i stedet for at blive udskrevet inde i funktionen. Prøv dette selv:
<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>
Funktionstyper i JavaScript
De tre ovenstående eksempler bruger alle den klassiske funktionsdeklaration, men moderne JavaScript tilbyder adskillige andre former. De adskiller sig primært i, om motoren hejser dem, og i hvordan hver enkelt behandler this nøgleord.
| Funktionstype | Typisk syntaks | Når det bruges |
|---|---|---|
| Funktionserklæring | funktion greet() { } | Navngivet, genanvendelig logik; løftet til toppen af sit omfang |
| Funktionsudtryk | const hilsner = funktion () { }; | Lagring af en funktion i en variabel; ikke hoist |
| Pilfunktion (ES6) | const hilsner = () => { }; | Korte tilbagekald; arver dette fra det omgivende område |
| Anonym funktion | sætTimeout(funktion () { }, 100); | Engangslogik ført direkte ind i en anden funktion |
| IIFE | (funktion () { })(); | Kører øjeblikkeligt og holder sine variabler private |
| Tilbagekald | items.forEach(visVare); | En funktion, der overføres til en anden funktion og kaldes senere |
Bemærkning til ovenstående eksempler: de historiske prøver bruger var og document.write(), og begge kører stadig i alle browsere. Nuværende praksis deklarerer variabler med let or const og udskriver outputtet via console.log() eller ved at indstille textContent på et element, fordi document.write() sletter en side, der allerede er færdigindlæst. type="text/javascript" Attributten er også valgfri i HTML5.
Funktionsparametre, argumenter og standardværdier
Parametre er de pladsholdernavne, der er angivet i definitionen, mens argumenter er de reelle værdier, der angives, når funktionen kaldes. countVowels(name) over, name er parameteren, og den tekst, der skrives i prompten, er argumentet.
function greet(user, greeting = "Hello") { return greeting + ", " + user; } greet("Ann"); greet("Ann", "Welcome");
- En parameter uden matchende argument bliver
undefinedmedmindre der angives en standardværdi, som f.eks.greetinger her. - Ekstra argumenter ignoreres af parameterlisten, men kan stadig nås via
argumentsobjekt i enhver ikke-pilfunktion. - En hvileparameter skrevet som
...valuessamler alle resterende argumenter til en ægte matrix.
Funktionsomfang og hejsning i JavaScript
Hvor en funktion skrives, bestemmer hvad den kan se, og hvornår den kan kaldes. To regler forklarer næsten alle overraskelser, som begyndere møder.
- Hejsning: Funktionsdeklarationer flyttes til toppen af deres omfang, før scriptet køres, så de kan kaldes på en linje over deres definition. Funktionsudtryk og pilefunktioner løftes ikke og udløser en fejl, hvis de kaldes tidligt.
- Anvendelsesområde: variabler deklareret med
varinde i en funktion er synlige i hele funktionen, mensletogconster begrænset til den blok, de sidder i. Alt, der erklæres uden for hver funktion, er globalt.
Vokaltælleren viser dette i praksis. Dens count Variablen deklareres uden for funktionen, så kaldet countVowels() anden gang på samme side fortsætter læggelsen til den tidligere total i stedet for at starte forfra ved nul. Flytning af deklarationen inde i funktionen ville nulstille den ved hvert kald.
Disse scoping regler overføres også til server-side kode, hvilket er grunden til, at den samme argumentation gælder, når funktioner skrives til node.js, og hvorfor funktionsadfærd optræder så ofte i JavaSpørgsmål til script-jobsamtaler.
