JavaSkriptdefiniera och anropa funktioner med exempel
James Hartman
⚡ Smart sammanfattning
JavaSkriptfunktioner grupperar återanvändbara kodblock som bara körs när de anropas, och den här genomgången visar hur man deklarerar ett, skickar argument till det och returnerar ett värde tillbaka till anroparen.
Vad är funktion i JavaManus?
Funktioner är mycket viktiga och användbara i alla programmeringsspråk eftersom de gör koden återanvändbar. En funktion är ett kodblock som bara körs om det anropas. Om du har några rader kod som behöver användas flera gånger kan du skapa en funktion som innehåller de upprepade raderna kod och sedan anropa funktionen var du vill.
Ingenting innanför klammerparenteserna körs av sig självt. Webbläsaren lagrar blocket under det namn du gav det, och koden körs bara när det namnet skrivs med parenteser efter, till exempel myFunction()Funktioner står därför i centrum för varje JavaScript programmet, om skriptet lever inuti sidan eller i en extern fil.
Hur man skapar en funktion i JavaScript
- Använd nyckelordet fungera följt av namnet på funktionen.
- Öppna och stäng parenteser efter funktionsnamnet.
- Efter parentes, öppna och stäng lockiga hängslen.
- Skriv dina kodrader inom hängslen.
Syntax:
function functionname()
{
lines of code to be executed
}
Exemplet nedan definierar myFunction() och anropar den sedan på nästa rad, så att meddelandet visas så fort sidan laddas. Pröva detta själv:
<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 argument
Du kan även skapa funktioner med argument. Argument bör anges inom parenteser.
Syntax:
function functionname(arg1, arg2)
{
lines of code to be executed
}
Här countVowels() tar emot det namn besökaren skriver in i prompten, loopar igenom varje tecken och rapporterar hur många vokaler namnet innehåller. Pröva detta själv:
<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>
JavaSkriptreturvärde
Du kan också skapa JS-funktioner som returnerar värden. Inuti funktionen måste du använda nyckelordet avkastning följt av värdet som ska returneras.
Syntax:
function functionname(arg1, arg2) { lines of code to be executed return val1; }
I detta sista exempel returnSum() lämnar tillbaka summan till raden som anropade den, så att resultatet kan sammanfogas till en mening istället för att skrivas ut inuti funktionen. Pröva detta själv:
<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>
Typer av funktioner i JavaScript
De tre exemplen ovan använder alla den klassiska funktionsdeklarationen, men modern JavaScript erbjuder flera andra former. De skiljer sig huvudsakligen åt i huruvida motorn lyfter dem och i hur var och en behandlar this nyckelord.
| Funktionstyp | Typisk syntax | När den används |
|---|---|---|
| Funktionsdeklaration | funktion hälsning() { } | Namngiven, återanvändbar logik; lyft till toppen av sitt omfång |
| Funktionsuttryck | const hälsning = funktion () { }; | Lagra en funktion i en variabel; inte hissad |
| Pilfunktion (ES6) | const hälsning = () => { }; | Korta återanrop; ärver detta från det omgivande omfånget |
| Anonym funktion | sättTimeout(funktion () { }, 100); | Engångslogik som skickas direkt till en annan funktion |
| IIFE | (funktion () { })(); | Körs omedelbart och håller sina variabler privata |
| Återuppringning | items.forEach(visaItem); | En funktion som överförs till en annan funktion och anropas senare |
Observera exemplen ovan: de historiska proverna använder var och document.write(), och båda körs fortfarande i alla webbläsare. Nuvarande praxis deklarerar variabler med let or const och skriver ut via console.log() eller genom att ställa in textContent på ett element, eftersom document.write() raderar en sida som redan har laddats klart. type="text/javascript" Attributet är också valfritt i HTML5.
Funktionsparametrar, argument och standardvärden
Parametrar är platshållarnamnen som anges i definitionen, medan argument är de reella värden som anges när funktionen anropas. countVowels(name) ovan, name är parametern och texten som skrivs in i prompten är argumentet.
function greet(user, greeting = "Hello") { return greeting + ", " + user; } greet("Ann"); greet("Ann", "Welcome");
- En parameter utan matchande argument blir
undefinedom inte ett standardvärde anges, somgreetingär här. - Extra argument ignoreras av parameterlistan men kan fortfarande nås via
argumentsobjekt inuti en funktion som inte är en pil. - En viloparameter skriven som
...valuessamlar alla återstående argument till en genuin array.
Funktionsomfattning och lyftning JavaScript
Var en funktion skrivs avgör vad den kan se och när den kan anropas. Två regler förklarar nästan alla överraskningar som nybörjare stöter på.
- Lyftning: Funktionsdeklarationer flyttas högst upp i sitt omfång innan skriptet körs, så de kan anropas på en rad ovanför sin definition. Funktionsuttryck och pilfunktioner flyttas inte och genererar ett fel om de anropas tidigt.
- Omfattning: variabler deklarerade med
varinuti en funktion är synliga i hela funktionen, medanletochconstär begränsade till det block de sitter i. Allt som deklareras utanför varje funktion är globalt.
Vokalräknaren visar detta i praktiken. Dess count variabeln deklareras utanför funktionen, så anropet countVowels() en andra gång på samma sida fortsätter att lägga till den tidigare summan istället för att börja om från noll. Att flytta deklarationen inuti funktionen skulle återställa den vid varje anrop.
Dessa scoping regler överförs även till serverkod, vilket är anledningen till att samma resonemang gäller när funktioner skrivs för node.js, och varför funktionsbeteende förekommer så ofta i JavaIntervjufrågor för manus.
