Repetition: Funktioner

Det här är en översikt över vad vi gick genom om funktioner.

Vi vill ofta kunna köra samma kod flera gånger när vi skriver program, utan att behöva skriva två gånger bara för det. Vi behöver ett sätt att klumpa ihop kod tillsammans och ge det ett namn, så att vi kan anropa koden igen senare genom att använda namnet. Sådana namngivna kodblock är vad vi kallar funktioner.

För att skapa en funktion måste vi först deklarera den och ge den ett namn, på samma sätt som vi skulle skapa en variabel, och sedan definierar vi den:

var sayHello = function() {
};

Vi kan lägga in vilken kod vi vill i funktionen - en sats, flera uttryck - beror lite på vad vi vill göra. I den här funktionen skriver vi bara ut ett meddelande på ett slumpmässigt ställe:

var sayHello = function() {
   text("Halllllllo!", random(200), random(200));
};

Om det enda vi gör är att deklarera funktionen, så kommer ingenting att hända. För att programmet ska kunna köra koden som finns inne i funktionen måste vi "anropa" funktionen genom att skriva namnet följt av tomma parenteser:

sayHello();

Och då kan vi anropa det när vi vill, hur många gånger vi vill!

sayHello();
sayHello();
sayHello();

Vi vill ofta kunna anpassa funktioner, för att berätta för programmet "Ja, gör allt i den här koden, men gör vissa saker lite annorlunda." På så sätt har vi kod som är både återanvändbar och samtidigt flexibel, det bästa av två världar. Det kan vi få genom att ange "argument" för en funktion, sedan använda dessa argument för att ändra hur funktionen fungerar genom att skicka med argumenten när vi anropar funktionen.

Till exempel, så kanske vi vill kunna säga exakt var vi vill att meddelandet ska visas, precis som vi gör när vi använder rect() och ellipse()? Vi kan föreställa oss hur vi skulle anropa funktionen för att placera meddelandet vid två exakta koordinater:

sayHello(50, 100);
sayHello(150, 200);

För kunna göra anropet på det viset måste vi ändra vår sayHello-funktionsdefinition så den vet att den kommer att få 2 argument som sedan ska användas inuti funktionen:

var sayHello = function(xPos, yPos) {
   text("Halllllllo!", xPos, yPos);
};

Argumenten som vi skickar in blir som variabler i funktionen, och namnen beror på vad vi kallar dem i parenteserna. Vi kan lika lätt byta namn till något kortare:

var sayHello = function(x, y) {
   text("Halllllllo!", x, y);
};

Våra funktioner kan ta emot ett antal argument - noll, en, två eller fler. Vi kunde också ha beslutat att vi ville ändra vår funktion för att ta emot ett namn att säga hej till:

var sayHello = function(name) {
   text("Halllllllo, " + name, random(200), random(200));
};

Och då skulle vi ha anropat den såhär:

sayHello("Winston");
sayHello("Pamela");

Vi kan kombinera dessa idéer och ta emot tre argument, ett för namnet och två för positionen:

var sayHello = function(name, x, y) {
   text("Halllllllo " + name, x, y);
};

Och då anropar vi den såhär:

sayHello("Winston", 10, 100);

Hur vi gör beror på vad vi vill att våra funktioner ska göra, och hur mycket vi vill justera vad de kan göra. Vi kan alltid börja utan argument och sedan lägga till dem när vi upptäcker att vi behöver dem.

Nu har vi faktiskt anropat funktioner hela tiden - när vi har ritat och animerat - med rect, ellipse, triangl osv. Alla de funktionerna kommer från ProcessingJS-biblioteket, och de laddas in i varje program som vi skapar här, så att vi alltid kan använda oss av dem. Vi har definierat de funktionerna i förväg för vi trodde att de skulle komma till nytta, och nu är det dags att skapa egna anpassade funktioner som kan användas i programmen. Till exempel så finns ellipse-funktionen, men det finns ingen kattfunktion - om ditt program involverar många olika katter på olika sätt kanske du vill skapa din egen kattfunktion!

Det finns en annan kraftfull sak vi kan göra med funktioner - vi kan använda dem för att ta in några värden, räkna på dem och svara med ett nytt värde. Tänk på alla saker du kan göra med en räknare - addera värden, subtrahera, räkna ut kvadratroten, multiplicera osv. Alla dessa funktioner skulle kunna göras med funktioner som tar in argument och svarar med ett resultat. Funktionerna tar då in argument och skickar tillbaka svaret med en retur sats. Här är en funktion som lägger ihop två tal och returnerar resultatet:

var addNumbers = function(num1, num2) {
  var result = num1 + num2;
  return result;
};

var sum = addNumbers(5, 2);
text(sum, 200, 200); // Skriver ut "7"

retur satsen gör två saker: satsen ger ett värde tillbaka till den som anropade funktionen (det är därför vi kunde lagra svaret i sum -variabeln) och avslutar sen direkt funktionen. Det betyder att det skulle bli tokigt om vi gjorde såhär, eftersom den sista raden aldrig skulle köras:

var addNumbers = function(num1, num2) {
  var result = num1 + num2;
  return result; // Returnerar result och avslutar funktionen
  result = result * 2; // Körs aldrig!
};

Funktioner med returvärden är ganska användbara för att manipulera data i program, och de kan användas tillsammans i uttryck också:

var biggerSum = addNumbers(2, 5) + addNumbers(3, 2);

Vi kan till och med anropa funktioner i funktionsanrop, men det kan bli svårt att läsa ibland:

var hugeSum = addNumbers(addNumbers(5, 2), addNumbers(3, 7));

Nu när vi vet hur man skapar funktioner som innehåller kodblock, måste vi ta upp ett par viktiga begrepp: lokala variabler och globala variabler.

När vi deklarerar en ny variabel inuti en funktion, säger vi att den är lokal för just den funktionen. Det beror på att det bara är den funktionen som kan se den variabeln - resten av programmet utanför funktionen vet inte om den variabeln. När vi är utanför funktionen är det som om variabeln inte längre existerar. I följande funktion är localResult en lokal variabel:

var addNumbers = function(num1, num2) {
  var localResult = num1 + num2;
  println("The local result is: " + localResult);
  return localResult;
};
addNumbers(5, 7);
println(localResult); // Åh nej!

När vi kör den koden får vi ett fel på sista raden: "localResult är inte definierad." Variabeln är bara definierad inuti funktionen, för det är där vi deklarerade den med var localResult = -raden och variabeln är inte definierad utanför funktionen.

När vi deklarerar en variabel utanför våra funktioner säger vi att det är en global variabel. Eftersom att alla funktioner nu kan komma åt den och göra vad de vill med den.

var globalResult;

var addNumbers = function(num1, num2) {
  globalResult = num1 + num2;
  println("The global result is: " + globalResult);
};
addNumbers(5, 7);
println(globalResult);

När vi kör koden ovan kommer vi inte att få något error eftersom vi deklarerade globalResult utanför funktionen, så vi kan komma åt variabeln var vi vill.

Alla programmeringsspråk är annorlunda, men för JavaScript är det viktigt att veta att variabler har "funktions-räckvidd" eller "funktions-scope" - en funktion kan se de lokala variablerna som deklarerades inuti den och de globala variablerna som deklarerades utanför den men den kan inte se de lokala variabler som andra funktioner har inom sig.

Vill du gå med i konversationen?

Logga in

Sortera efter:

Inga inlägg än.

Förstår du engelska? Klicka här för att se fler diskussioner på Khan Academys engelska webbplats.