En funktion er et genanvendeligt stykke kode, der kører, når du kalder det. Funktioner giver dig mulighed for at genbruge kode, hvilket gør den mere modulær og lettere at vedligeholde.
Der er flere måder at oprette funktioner i JavaScript på. Her lærer du de forskellige måder at oprette funktioner på, og hvordan du bruger dem.
Funktionserklæringer: The Straightforward Way
En måde du kan oprette funktioner i JavaScript på er gennem funktionserklæringer. En funktionserklæring er en funktion i JavaScript, der følger nedenstående syntaks.
fungerefunktionsnavn(parametre) {
// koden kommer her...
Vend tilbage"Dette er en funktionserklæring";
}
Komponenterne i kodeblokken ovenfor inkluderer:
- Det fungere nøgleord: Dette nøgleord erklærer en funktion.
- funktionsnavn: Dette er navnet på funktionen. I praksis skal det være så beskrivende og meningsfuldt som muligt og angive, hvad funktionen gør.
- parametre: Dette repræsenterer funktionsparametrene. Parametre er en valgfri liste over variabler, som du kan overføre til en funktion, når du kalder den.
- Funktionens krop: Denne indeholder den kode, som funktionen vil køre, når du kalder den. Det er omgivet af krøllede seler {} og kan indeholde enhver gyldig JavaScript-kode.
- Det Vend tilbage sætning: Denne sætning stopper en funktions udførelse og returnerer den angivne værdi. I ovenstående tilfælde ville kald af funktionen returnere strengen "Dette er en funktionserklæring".
For eksempel tager funktionserklæringen nedenfor tre tal som parametre og returnerer deres sum.
fungeretilføjeThreeNumbers(a, b, c) {
Vend tilbage a + b + c;
}
For at kalde en funktionserklæring i JavaScript skal du skrive funktionsnavnet efterfulgt af et sæt parenteser (). Hvis funktionen tager nogen parametre, skal du sende dem som argumenter inden for parentes.
For eksempel:
addThreeNumbers(1, 2, 3) // 6
Kodeblokken ovenfor kalder addThreeNumber fungerer og sender 1, 2 og 3 som argumenter til funktionen. Hvis du kører denne kode, returnerer den værdien 6.
JavaScript hejser funktionserklæringer, hvilket betyder, at du kan kalde dem, før du definerer dem.
For eksempel:
erHejst(); // Funktion er hejst
fungereer hejst() {
konsol.log("Funktionen er hejst");
Vend tilbagerigtigt;
}
Som vist i kodeblokken ovenfor, ringer er hejst før du definerer det ville det ikke give en fejl.
Funktionsudtryk: Fungerer som værdier
I JavaScript kan du definere en funktion som et udtryk. Du kan derefter tildele funktionsværdien til en variabel eller bruge den som et argument til en anden funktion.
De er også kendt som anonyme funktioner, da de ikke har nogen navne, og du kan kun kalde dem fra den variabel, du har tildelt dem.
Nedenfor er syntaksen for et funktionsudtryk:
konst funktionsnavn = fungere () {
Vend tilbage"Funktionsudtryk";
};
For at kalde et funktionsudtryk i JavaScript skal du skrive det variabelnavn, du tildelte funktionen efterfulgt af et sæt parenteser (). Hvis funktionen tager nogen parametre, skal du sende dem som argumenter inden for parentes.
For eksempel:
funktionsnavn(); // Funktionsudtryk
Funktionsudtryk er praktiske, når du opretter funktioner, der kører i andre funktioner. Typiske eksempler omfatter hændelseshandlere og deres tilbagekald.
For eksempel:
button.addEventListener("klik", fungere (begivenhed) {
konsol.log("Du klikkede på en knap!");
});
Eksemplet ovenfor brugte et funktionsudtryk, der tager en begivenhed argument som et tilbagekald til addEventListener fungere. Du behøver ikke at kalde funktionen eksplicit, når du bruger et funktionsudtryk som tilbagekald. Den bliver automatisk kaldt af sin overordnede funktion.
I ovenstående tilfælde, når begivenhedslytteren modtager en klik hændelse kalder den tilbagekaldsfunktionen og videregiver begivenhed objekt som argument.
I modsætning til funktionserklæringer er funktionsudtryk ikke hejst, så du kan ikke kalde dem, før du definerer dem. Forsøger du at få adgang til et funktionsudtryk, før du definerer det, vil det resultere i en Referencefejl.
For eksempel:
erHejst(); // ReferenceError: Kan ikke få adgang til 'isHoisted' før initialisering
konst er hejst = fungere () {
konsol.log("Funktionen er hejst");
};
Pilefunktioner: Kompakt og begrænset
ES6 introducerede en stenografi til at skrive anonyme funktioner i JavaScript kaldet pilefunktioner. De har en kortfattet syntaks, der kan gøre din kode mere læsbar, især når det drejer sig om korte, enkeltlinjes funktioner.
I modsætning til andre metoder til at oprette funktioner, kræver pilefunktioner ikke fungere søgeord. Et pilfunktionsudtryk består af tre dele:
- Et par parenteser (()) indeholdende parametrene. Du kan udelade parenteserne, hvis funktionen kun har én parameter.
- En pil (=>), som består af et lighedstegn (=) og et større end-tegn (>).
- Et par krøllede seler indeholdende funktionskroppen. Du kan udelade de krøllede parenteser, hvis funktionen består af et enkelt udtryk.
For eksempel:
// Enkelt parameter, implicit retur
konst funktionsnavn = parameter =>konsol.log("Enkelt parameter pil funktion")
// Flere parametre, eksplicit retur
konst funktionsnavn = (parameter_1, parameter_2) => {
Vend tilbage"Pilefunktion med flere parametre"
};
Når du udelader de krøllede klammeparenteser, returnerer pilefunktionen implicit det enkelte udtryk, så der er ikke behov for Vend tilbage søgeord. På den anden side, hvis du ikke udelader de krøllede seler, skal du udtrykkeligt returnere en værdi ved at bruge Vend tilbage søgeord.
Pile funktioner har også en anden det her bindende i forhold til almindelige funktioner. I almindelige funktioner er værdien af det her afhænger af, hvordan du kalder funktionen. I en pilefunktion, det her er altid bundet til det her værdien af det omgivende omfang.
For eksempel:
konst foo = {
navn: "Dave",
hilse: fungere () {
setTimeout(() => {
konsol.log('Hej, jeg hedder ${det her.navn}`);
}, 1000);
},
};
foo.greet(); // Logger "Hej, mit navn er Dave" efter 1 sekund
I eksemplet ovenfor fungerer pilen inde i hilse metode har adgang til dette.navn, selvom sætTimeout funktion kalder det. En normal funktion ville have sin det her bundet til det globale objekt.
Som navnet antyder, er en umiddelbart påkaldt funktion (IIFE) en funktion, der kører, så snart den er defineret.
Her er strukturen af en IIFE:
(fungere () {
// kode her
})();(() => {
// kode her
})();
(fungere (param_1, param_2) {
konsol.log (param_1 * param_2);
})(2, 3);
En IIFE består af et funktionsudtryk pakket inde i et par parenteser. Følg den med et par parenteser uden for kabinettet for at aktivere funktionen.
Du kan bruge IIFE'er til at oprette scopes, skjule implementeringsdetaljer og dele data mellem flere scripts. De blev engang brugt som en modulsystem i JavaScript.
Oprettelse af en funktion på mange forskellige måder
Det er afgørende at forstå, hvordan man opretter funktioner i JavaScript. Dette gælder for en grundlæggende funktion, der udfører en simpel beregning eller en sofistikeret funktion, der interagerer med andre dele af din kode.
Du kan bruge teknikkerne diskuteret ovenfor til at bygge funktioner i JavaScript og strukturere og organisere din kode. Vælg den tilgang, der passer bedst til dine krav, da hver enkelt har forskellige fordele og anvendelser.
