JavaScript-klassen en objecten: een introductie tot ES6

In het vorige hoofdstuk hebben we gezien hoe je met events in JavaScript werkt. In dit hoofdstuk kijken we naar klassen en objecten in JavaScript.

Het is belangrijk om klassen en objecten in JavaScript te begrijpen, want daarmee bouw je complexere datastructuren en organiseer je je code beter. Voordat je erin duikt, is het handig om de basis van objectgeoriënteerd programmeren te kennen.

Wat is een klasse in JavaScript?

Een klasse is een blauwdruk waarmee je objecten maakt. Ze legt vast welke eigenschappen en methoden die objecten krijgen. Met klassen maak je meerdere objecten die dezelfde eigenschappen en methoden delen, en dat komt in heel wat situaties goed van pas.

Een klasse declareren

Een klasse maak je in JavaScript met deze syntaxis:

class MaClasse {
  // Constructor van de klasse
  constructor() {
    // Eigenschappen en methoden van de klasse initialiseren
  }

// Methoden van de klasse
  maMethode() {
    // Code van de methode
  }
}

Constructor en methoden van een klasse

De definitie van een klasse in JavaScript bevat de constructor van die klasse: een speciale methode die een object op basis van de klasse aanmaakt en initialiseert.

De constructor definieer je met het keyword ‘constructor’. Bijvoorbeeld:

// Constructor van de klasse
constructor() {
// Eigenschappen en methoden van de klasse initialiseren
}

De methoden van een klasse definieer je net als functies, alleen laat je het keyword ‘function’ weg.

// Methoden van de klasse
maMethode() {
 // Code van de methode
}

De methoden van een object benader je op dezelfde manier als de eigenschappen, met deze syntaxis: monObjet.maMethode();

const monObjet = new MaClasse();
monObjet.maMethode();

Overerving met klassen

Overerving is een kernbegrip in objectgeoriënteerd programmeren (OOP). Je maakt een nieuwe klasse op basis van een bestaande klasse en neemt daarbij haar eigenschappen en methoden over. Zo hergebruik je code en houd je je applicatie overzichtelijk.

In JavaScript regel je overerving tussen klassen met het keyword ‘extends’. Hier is een voorbeeld van een klasse ‘Enfant’ die overerft van een klasse ‘Parent’:

class Parent {
  constructor(nom) {
    this.nom = nom;
  }

saluer() {
    console.log(Bonjour, je suis ${this.nom});
  }
}

class Enfant extends Parent {
  constructor(nom, age) {
    super(nom);
    this.age = age;
  }
}

const enfant1 = new Enfant('Marie', 7);
enfant1.saluer(); // Bonjour, je suis Marie

De methode super gebruiken

Met super roep je vanuit een kindklasse een methode van de bovenliggende klasse aan. Stel dat je een klasse Animal hebt met een methode ‘move()’ die beschrijft hoe dieren zich verplaatsen, en een klasse Chat die van Animal overerft. Dan roep je met super de methode ‘move()’ van Animal aan vanuit de klasse Chat. Hier is een codevoorbeeld:

class Animal {
  move() {
    console.log('Je me déplace');
  }
}

class Chat extends Animal {
  move() {
    console.log('Je me déplace en sautant');
    super.move();
  }
}

const monChat = new Chat();
monChat.move();
// toont "Je me déplace en sautant" en daarna "Je me déplace"

Statische methoden

Statische methoden horen bij de klasse zelf en niet bij haar instanties. Je kunt ze aanroepen zonder de klasse te instantiëren. Je kunt bijvoorbeeld in de klasse Animal een statische methode ‘getAnimalType()’ definiëren die het type dier teruggeeft. Hier is een codevoorbeeld:

class Animal {
  static getAnimalType() {
    return 'Animal';
  }
}

console.log(Animal.getAnimalType()); // toont "Animal"

Statische methoden kun je niet op instanties van de klasse aanroepen. Probeer je de methode ‘getAnimalType()’ op een instantie van de klasse Animal aan te roepen, dan krijg je een foutmelding.

Hoe werk je met de eigenschappen van een object?

Je kunt ook parameters aan de constructor van de klasse meegeven om eigenschappen van het object te initialiseren:

class MaClasse {
  constructor(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }
}
const monObjet = new MaClasse("Valeur de param1", "Valeur de param2");

Een eigenschap van een object lees je uit met deze syntaxis:

monObjet.maPropriete;

Een eigenschap van een object wijzig je met deze syntaxis:

monObjet.maPropriete = "Nouvelle valeur";

Een eigenschap van een object verwijder je met het keyword ‘delete’, zo:

delete monObjet.maPropriete;

Een eigenschap die op het prototype van het object is gedefinieerd, kun je niet verwijderen. Hoe je met overgeërfde eigenschappen omgaat, lees je verderop in het gedeelte over overerving met objecten.

Getters en setters aan onze klasse toevoegen

Getters en setters zijn methoden waarmee je de eigenschappen van een object gecontroleerd uitleest en wijzigt. Je gebruikt ze vaak wanneer je bij het lezen of aanpassen van een eigenschap extra logica wilt uitvoeren.

Hier is een voorbeeld van getters en setters in een klasse:

class MonObjet {
  constructor(propriete) {
    this._propriete = propriete;
  }

// Getter
  get propriete() {
    return this._propriete;
  }

// Setter
  set propriete(value) {
    this._propriete = value;
  }
}

const objet = new MonObjet('valeur initiale');
console.log(objet.propriete); // toont 'valeur initiale'

objet.propriete = 'nouvelle valeur';
console.log(objet.propriete); // toont 'nouvelle valeur'

Getters en setters zijn methoden, geen eigenschappen. Je hebt dus de syntaxis objet.propriete() nodig om hun waarde op te vragen, en niet objet.propriete (zonder haakjes).

In het voorbeeld hierboven halen we met een getter de waarde van de eigenschap _propriete op, en wijzigen we die met een setter. De eigenschap _propriete zelf hebben we in de constructor van de klasse gedefinieerd met het keyword this. Die eigenschap is privé en is alleen via de getters en setters aan te passen.

class MonObjet {
  constructor(valeur) {
    this._maPropriete = valeur;
  }

get maPropriete() {
    return this._maPropriete;
  }

set maPropriete(valeur) {
    if (typeof valeur === 'string') {
      this._maPropriete = valeur;
    } else {
      console.log('La valeur doit être une chaîne de caractères');
    }
  }
}

const monObj = new MonObjet('ma valeur');
console.log(monObj.maPropriete); // Toont 'ma valeur'
monObj.maPropriete = 42; // Toont 'La valeur

Conclusie

We hebben gezien hoe je klassen en objecten gebruikt in JavaScript om je code efficiënter te structureren, en daarna hoe je objecten aanmaakt en bewerkt vanuit klassen met de constructor en methoden. We hebben ook overerving met klassen behandeld aan de hand van super en de statische methoden. Tot slot kwamen de getters en setters aan bod, waarmee je regelt hoe eigenschappen van een object worden gelezen en gewijzigd.

In het volgende hoofdstuk kijken we hoe je fouten afhandelt en je code debugt met try-catch en de debugtools van je browser. Zo begrijp je beter wat er in je code gebeurt en kun je die zo nodig corrigeren.