Klasser og objekter

Anatomien#

class Studerende {
constructor(navn, linje) {
  this.navn = navn;
  this.linje = linje;
  this.karakterer = [];
}

tilfoejKarakter(karakter) {
  this.karakterer.push(karakter);
}

gennemsnit() {
  if (this.karakterer.length === 0) {
    return 0;
  }
  const sum = this.karakterer.reduce((a, b) => a + b, 0);
  return sum / this.karakterer.length;
}
}

const ida = new Studerende("Ida", "HA(it.)");
ida.tilfoejKarakter(10);
ida.tilfoejKarakter(7);

console.log(ida.navn);
console.log(ida.gennemsnit());

Tryk på “Kør koden”.

Fire ting at lægge mærke til:

• constructor kaldes automatisk, når du skriver new. Det er der, felterne bliver sat. Der kan kun være én.
• this peger på det objekt, der er ved at blive lavet, eller som metoden blev kaldt på.
• Metoder skrives uden ordet function og uden komma imellem.
• Felter behøver ikke komme udefra. this.karakterer = [] giver hvert objekt sin egen tomme liste.

new laver et nyt eksemplar hver gang#

class Taeller {
constructor() {
  this.antal = 0;
}
tael() {
  this.antal = this.antal + 1;
  return this.antal;
}
}

const a = new Taeller();
const b = new Taeller();

a.tael();
a.tael();
b.tael();

console.log(a.antal);
console.log(b.antal);

Tryk på “Kør koden”.

To objekter, to uafhængige tællere. Det er hele forskellen på at bruge klasser og at have én global variabel.

this er det hyppigste problem#

this peger på det objekt, metoden blev kaldt på, men kun hvis den bliver kaldt som en metode.

class Ur {
constructor() {
  this.tid = 0;
}
tik() {
  this.tid = this.tid + 1;
  console.log(this.tid);
}
}

const ur = new Ur();
ur.tik();

const loesrevet = ur.tik;

Tryk på “Kør koden”.

Kalder du loesrevet(), mister funktionen sin forbindelse til objektet, og this er ikke længere uret. Det sker typisk, når en metode sendes med som kaldbagfunktion til addEventListener. Løsningen er en arrow function udenom:

knap.addEventListener("click", () => ur.tik());

Statiske metoder#

En metode med static hører til klassen, ikke til det enkelte objekt. Den bruges til hjælpefunktioner, der ikke har brug for this.

class Matematik {
static kvadrat(x) {
  return x * x;
}
}

console.log(Matematik.kvadrat(6));

Tryk på “Kør koden”.

Fra objektliteral til klasse#

Du kunne skrive det samme med et almindeligt objekt. Forskellen viser sig, når du skal bruge mange af dem: med et objektliteral skriver du hele formen igen for hver, og der er intet, der sikrer, at de har de samme felter. Klassen er ét sted at rette, når formen ændrer sig.

Kort opsamling#

• constructor sætter felterne, new laver eksemplaret.
• this er det objekt, metoden blev kaldt på.
• Hvert objekt har sine egne værdier.
• Mister du this, er metoden blevet kaldt løsrevet fra sit objekt.