9. Objekter

Skolekoding.no > Tekstkoding > p5.js > Kurs > 9. Objekter

9.1 Hva er objekter?

Objekter er delprogrammer litt på samme måte som funksjoner. Men objekter kan inneholde mye mer enn hva funksjoner kan. Objekter har både egne variable og egne funksjoner, og er slik sett delprogrammer i ordets rette forstand. Poenget med objekter er å samle alt av variabler og funksjoner som gjelder det aktuelle dataobjektet på ett sted, istedet for at de listes opp i hovedprogrammet. Dette gjør koden mye mer oversiktlig og lettere å vedlikeholde.

Objekter lages med utgangspunkt i en mal. Malen kalles en «klasse».

Når man bygger hus, kan flere hus bli bygget etter samme tegning, men hvert hus kan likevel være forskjellige på mange måter. Fargen kan være forskjellig, ytterdøra, taket, innredningen av rommene osv.

Slik er det også med klassen og de objektene som blir laget med utgangspunkt i klassen. Klassen er malen. Objektene har en grunnstruktur som beskrives i klassen, men er likevel innbyrdes forskjellige.

​9.2. Klasse

Klassen er malen som vi lager objekter ut i fra.  En klasse starter med ordet «class» etterfulgt av et valgfritt navn og en krøllparentes.

  • class Firkant {

Det er vanlig å bruke stor forbokstav i klassenavn for å skille klassen fra vanlige variabler.

9.3 Klassens variabler (felt)

Det neste vi gjør er å skrive inn de variablene klassen skal ha.

Variablene opprettes i en egen funksjon som kalles  konstruktøren (vi konstruerer klassen). Noen av variablene skal være forskjellige fra objekt til objekt. Noen skal være like for alle objekter. Husets farge, dørtyper og innredning kan være ulike fra hus til hus. Husets grunnflate og mønehøyde skal være lik for alle hus.

De verdiene som skal kunne være ulike fra objekt til objekt bringes inn i klassen via midlertidige variable som listes opp i konstruktør-parentesen.

  • class Firkant {
  • constructor(x, y, farge) { // Variabler som kan ha ulikt innhold fra objekt til objekt. Midlertidige variabler.

Deretter overfører vi verdien til disse midlertidige variablene til klassens egne variabler.
NB! Vi må bruke forstavelsen «this.» for å markere at dette er klassens variabler. ​De skal kunne brukes hvor som helst i klassen.

  • class Firkant {
    • constructor(x, y, farge) { // Variabler som kan ha ulikt innhold fra objekt til objekt. Midlertidige variabler. (De midlertidige variabelene kan hete hva som helst. Ofte brukes x_ eller tempX)
    • this.x = x; // verdien av «x» overføres til «this.x».Vi kunne også brukt «this.xVerdi» eller et annet navn
    • this.y = y;
    • this.farge = farge;
    • this.b = 300; // Skal være lik for alle objekter
    • this.h = 200;​ // Skal være lik for alle objekter
  • }

NB! Vi må bruke forstavelsen «this.» både her, og når variablene brukes seinere i klassen.

9.5 Klassens funksjoner (metoder)

Nå kan vi skrive resten av klassens funksjoner. Denne klassen skal bare ha ha én funksjon, nemlig en funksjon som skal tegne firkanten. En slik funksjon pleier å ha navnet display, men vi kan kalle den hva vi vil.

  • class Firkant {
    • constructor(x, y, farge) { // Variabler som kan ha ulikt innhold fra objekt til objekt
      • this.x;
      • this.y; 
      • this.farge; 
      • this.b = 300; // Skal være lik for alle objekter
      • this.h = 200;​ // Skal være lik for alle objekter
    • }
    • display() {
      • fill(this.farge, 100, 100);
      • rect(this.x, this.y, this.b, this.h); // NB! husk «this.»
    • }
  • }

9.6 Opprette objekter

Vi deklarerer objekter på samme måte som vi deklarerer andre variabler: øverst i hovedprogrammet, før setup(). 

i p5.js opereres det ikke med datatyper. Vi kan derfor ikke se av deklareringslinjen at dette er objekter av typen Firkant. Vi legger til en kommentar i stedet. I tillegg har vi valgt et navn «gul_Firkant» som indikerer slektskap med klassen Firkant.

  • let gul_Firkant; // Objekt av typen Firkant
  • let cyan_Firkant; // Objekt av typen Firkant

9.7 Gi objektene verdier

I setup() initiere vi objektene. Da må vi bruke ordet «new«

  • let gul_Firkant; // Objekt av typen Firkant
  • let cyan_Firkant;  // Objekt av typen Firkant
  • void setup() {
    • size(600, 400);
    • colorMode(HSB, 360, 100, 100);
    • gul_Firkant = new Firkant(20, 100, 90); // Vi må bruke ordet «new» når vi gir oppretter et objekt
    • turkis_Firkant = new Firkant(50, 20, 180); // Oppretter et objekt av typen «Firkant» med navn «turkis» med x-verdi 50, y-verdi 20 og farge 180.
  • }

9.8 Bruke objektene

Da kan vi bruke objektene i draw(). Vi bruker objektnavnet og metodenavnet med punktum i mellom.

let gul_Firkant;  // Objekt av typen Firkant
let cyan_Firkant;  // Objekt av typen Firkant

  • function setup() {
    • createCanvas(600, 400);
    • colorMode(HSB, 360, 100, 100);
    • gul_Firkant= new Firkant(20, 100, 90);
    • cyan_Firkant= new Firkant(50, 20, 180);
  • }
  • function draw() {
    • gul_Firkant.display(); // Kan leses «gul sin display-metode
    • turkis_Firkant.display();
  • }

Til slutt setter vi sammen hovedprogrammet og klassen. Hvis det er mange store klasser kan de legges i egne filer for å få en ryddigere kode. Les mer..

let gul; // Objekt av typen Firkant
let cyan;  // Objekt av typen Firkant

  • function setup() {
    • createCanvas(600, 400);
    • colorMode(HSB, 360, 100, 100);
    • gul_Firkant = new Firkant(100, 50, 60);
    • cyan_Firkant = new Firkant(200, 150, 180);
  • }
  • function draw() {
    • gul_Firkant.display(); // Kan leses «gul firkant sin display-metode
    • cyan_Firkant.display();
  • }
  • class Firkant {
    • constructor(x, y, farge) { // Variabler som kan ha ulikt innhold fra objekt til objekt
      • this.x = x;
      • this.y = y;
      • this.farge = farge;
      • this.b = 300; // Skal være lik for alle objekter
      • this.h = 200; // Skal være lik for alle objekter
    • }
    • display() {
      • fill(this.farge, 100, 100);
      • rect(this.x, this.y, this.b, this.h); // NB! husk «this.»
    • }
  • }

9.9 Oppgave

Lag en snømannklasse, og lag et program som bruker denne klassen.

skolekoding.no
Stein Olav Kivle