JavaScript-klassen: constructor, methoden en overerving

Bijgewerkt op 10 januari 2023

Zoek je een JavaScript-tutorial waarin ook JavaScript-klassen aan bod komen, dan is mijn nieuwe JavaScript-tutorial misschien iets voor je.

Klassen kwamen met ECMAScript 2015 in JavaScript terecht. Anders dan in klassieke objectgeoriënteerde talen zijn klassen in JavaScript gewoon een bijzonder soort functies. Alleen schrijf je geen “function”, maar “class”. Die syntaxis is er bewust in gezet, zodat JavaScript-code er hetzelfde uitziet als in andere objectgeoriënteerde talen (Java, Python, C++).

Een klasse definiëren

javascript

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

Een klasse declareer je met het keyword class, gevolgd door de naam van de klasse (hier Rectangle).

Constructor: dat is de speciale methode die een instantie van de klasse initialiseert. Elke keer dat je een nieuwe instantie aanmaakt, draait de constructor.

Methoden in een klasse

javascript

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width; 
    }
    // Méthode prototype
    area() {
        return console.log(`La zone est ${this.height*this.width}`); 
    }
    // Méthode statique
    static display(rect){
        return console.log(`Height: ${rect.height} Width: ${rect.width}`); 
    }
}

const rectangle = new Rectangle(5, 4);  // Instancier la classe
rectangle.area(); 
// La zone est 20
Rectangle.display(rectangle); 
// Height: 5 Width: 4

Prototypemethode: area() is een prototypemethode.
Statische methode: display() is een statische methode.

Prototypemethode

Een prototypemethode kun je pas aanroepen als je een instantie van de klasse hebt gemaakt. In het voorbeeld hierboven zie je die aanroep op regel 17: de naam van het object, de naam van de methode en haakjes erachter (eventuele parameters zet je tussen die haakjes).

Statische methode

Een statische methode roep je aan zonder de klasse te instantiëren. Statische methoden horen bij de klasse zelf, niet bij het object. Je roept zo’n methode dus niet aan op het object (rectangle), maar op de klasse (Rectangle), zoals op regel 19.

Overerving

javascript

class Car {
    constructor(brand) {
        this.carname = brand; 
    }
    present() {
        return 'c\'est ' + this.carname;  
    }
}

class Model extends Car {
    constructor(brand, model) {
        super(brand); 
        this.model = model; 
    }
    show() {
        return console.log(`${this.present()} ${this.model}`); 
    }
}

const mycar = new Model("Ford", "Mustang"); 
mycar.show(); 
// c'est Ford Mustang

Overerving tussen klassen regel je met het keyword extends. De naam van de bovenliggende klasse zet je direct achter extends.

Een klasse die overerft, krijgt alle methoden van de andere klasse erbij. In het voorbeeld hierboven neemt de klasse Model alle methoden van de klasse Car over.

Met super() spreek je de bovenliggende klasse aan. Roep je super() aan in de constructor, dan draai je de constructor van de parent en heb je toegang tot zijn eigenschappen en methoden.
Overerving is handig om code te hergebruiken: je neemt de eigenschappen en methoden van een bestaande klasse mee wanneer je een nieuwe klasse schrijft.

JavaScript