Classes

Wat zijn classes?

Een class is een sjabloon om meerdere objects van hetzelfde type te maken. In plaats van elk object handmatig te bouwen, definieer je de structuur één keer in een class.

Zonder class

const gebruiker1 = { naam: 'Anna', email: 'anna@email.com', rol: 'gebruiker' };
const gebruiker2 = { naam: 'Bob', email: 'bob@email.com', rol: 'admin' };
const gebruiker3 = { naam: 'Carol', email: 'carol@email.com', rol: 'gebruiker' };
// Herhaling, geen structuur afgedwongen

Met class

class Gebruiker {
  constructor(naam, email, rol = 'gebruiker') {
    this.naam = naam;
    this.email = email;
    this.rol = rol;
  }
}

const gebruiker1 = new Gebruiker('Anna', 'anna@email.com');
const gebruiker2 = new Gebruiker('Bob', 'bob@email.com', 'admin');
const gebruiker3 = new Gebruiker('Carol', 'carol@email.com');

constructor

De constructor is een speciale method die automatisch wordt uitgevoerd wanneer je een nieuw object maakt met new.

class Auto {
  constructor(merk, model, jaar) {
    this.merk = merk;
    this.model = model;
    this.jaar = jaar;
    this.snelheid = 0; // standaardwaarde
  }
}

const mijnAuto = new Auto('Fiat', '500', 2022);
console.log(mijnAuto.merk);     // "Fiat"
console.log(mijnAuto.snelheid); // 0

Methods

Methods zijn functies die bij de class horen. Je definieert ze direct in de class, zonder het function keyword.

class Auto {
  constructor(merk, model) {
    this.merk = merk;
    this.model = model;
    this.snelheid = 0;
  }

  accelereer(km) {
    this.snelheid += km;
    return `${this.merk} rijdt nu ${this.snelheid} km/h`;
  }

  rem(km) {
    this.snelheid = Math.max(0, this.snelheid - km);
    return `${this.merk} rijdt nu ${this.snelheid} km/h`;
  }

  info() {
    return `${this.merk} ${this.model} — ${this.snelheid} km/h`;
  }
}

const auto = new Auto('Fiat', '500');
console.log(auto.accelereer(50)); // "Fiat rijdt nu 50 km/h"
console.log(auto.rem(20));        // "Fiat rijdt nu 30 km/h"
console.log(auto.info());         // "Fiat 500 — 30 km/h"

this in classes

Binnen een class verwijst this naar het specifieke object dat is aangemaakt. Elk object heeft zijn eigen this.

class Teller {
  constructor(startWaarde = 0) {
    this.waarde = startWaarde;
  }

  verhoog() {
    this.waarde++;
  }

  verlaag() {
    this.waarde--;
  }

  reset() {
    this.waarde = 0;
  }
}

const teller1 = new Teller();
const teller2 = new Teller(100);

teller1.verhoog();
teller1.verhoog();
teller2.verlaag();

console.log(teller1.waarde); // 2
console.log(teller2.waarde); // 99 — onafhankelijk van teller1

extends (overerving)

Met extends maak je een child class die alle eigenschappen en methods van de parent class erft, en er dingen aan toevoegt.

class Voertuig {
  constructor(merk, model) {
    this.merk = merk;
    this.model = model;
    this.snelheid = 0;
  }

  accelereer(km) {
    this.snelheid += km;
  }

  info() {
    return `${this.merk} ${this.model}`;
  }
}

class ElektrischeAuto extends Voertuig {
  constructor(merk, model, batterijCapaciteit) {
    super(merk, model); // roep parent constructor aan
    this.batterijCapaciteit = batterijCapaciteit;
    this.opgeladen = 100;
  }

  laadOp() {
    this.opgeladen = 100;
    return 'Volledig opgeladen!';
  }

  info() {
    return `${super.info()} — batterij: ${this.opgeladen}%`;
  }
}

const tesla = new ElektrischeAuto('Tesla', 'Model 3', 75);
tesla.accelereer(100); // geërfd van Voertuig
console.log(tesla.info()); // "Tesla Model 3 — batterij: 100%"

super

super verwijst naar de parent class. Je gebruikt het om de parent constructor aan te roepen of parent methods te gebruiken.

super() in constructor

class Dier {
  constructor(naam, geluid) {
    this.naam = naam;
    this.geluid = geluid;
  }

  maakGeluid() {
    return `${this.naam} zegt: ${this.geluid}`;
  }
}

class Hond extends Dier {
  constructor(naam) {
    super(naam, 'Woef'); // roep Dier constructor aan
    this.ras = 'Onbekend';
  }

  fetch() {
    return `${this.naam} haalt de bal op!`;
  }
}

const hond = new Hond('Rex');
console.log(hond.maakGeluid()); // "Rex zegt: Woef" (van Dier)
console.log(hond.fetch());      // "Rex haalt de bal op!" (van Hond)

super.method()

class Medewerker {
  beschrijving() {
    return 'Medewerker';
  }
}

class Manager extends Medewerker {
  beschrijving() {
    return `${super.beschrijving()} & Manager`;
  }
}

const mgr = new Manager();
console.log(mgr.beschrijving()); // "Medewerker & Manager"

static

Statische methods horen bij de class zelf, niet bij individuele objecten. Je roept ze aan op de class, niet op een instantie.

class Wiskunde {
  static optellen(a, b) {
    return a + b;
  }

  static gemiddelde(getallen) {
    const som = getallen.reduce((acc, n) => acc + n, 0);
    return som / getallen.length;
  }
}

// Aanroepen op de class, niet op een object:
console.log(Wiskunde.optellen(3, 4));       // 7
console.log(Wiskunde.gemiddelde([4, 6, 8])); // 6

// Dit werkt NIET:
const w = new Wiskunde();
w.optellen(3, 4); // TypeError

Private velden (#)

Met het # voorvoegsel maak je een property privé — alleen toegankelijk binnen de class zelf.

class BankRekening {
  #saldo = 0; // privé property

  constructor(beginsaldo) {
    this.#saldo = beginsaldo;
  }

  stortIn(bedrag) {
    if (bedrag <= 0) throw new Error('Bedrag moet positief zijn');
    this.#saldo += bedrag;
  }

  neemOp(bedrag) {
    if (bedrag > this.#saldo) throw new Error('Onvoldoende saldo');
    this.#saldo -= bedrag;
  }

  getSaldo() {
    return this.#saldo;
  }
}

const rekening = new BankRekening(100);
rekening.stortIn(50);
console.log(rekening.getSaldo()); // 150

console.log(rekening.#saldo); // SyntaxError — privé!

Samenvatting