Klassen in JavaScript

Dit artikel legt klassen in JavaScript uit.

YouTube Video

Klassen in JavaScript

In JavaScript omvat een klasse het concept van objectgeoriënteerd programmeren en dient het als een blauwdruk voor objecten. Met klassen kun je de eigenschappen en methoden van een object beknopt definiëren, wat de herbruikbaarheid en code-organisatie verbetert. Klassesyntax werd in JavaScript geïntroduceerd met ES6.

Klassedefinitie

Een klasse wordt gedefinieerd met het sleutelwoord class en wordt meestal geïnitieerd met een methode genaamd een constructor.

 1class Person {
 2    // Constructor method (called when the class is instantiated)
 3    constructor(name, age) {
 4        this.name = name; // Property definition
 5        this.age = age;
 6    }
 7
 8    // Method definition
 9    greet() {
10        return `Hello, my name is ${this.name}`;
11    }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice

• We definiëren een klasse met class Person.
• De constructor is een speciale methode die automatisch wordt aangeroepen wanneer een object wordt gemaakt.
• Het this sleutelwoord verwijst naar de instantie (object) van de klasse binnen de klasse.

Klasseneigenschappen en methoden

Een klasse kan eigenschappen en methoden definiëren. Eigenschappen vertegenwoordigen de attributen van een object, en methoden vertegenwoordigen de functies ervan.

 1class Car {
 2    constructor(brand, model) {
 3        this.brand = brand;
 4        this.model = model;
 5    }
 6
 7    // Method definition
 8    drive() {
 9        console.log(`Driving a ${this.brand} ${this.model}`);
10    }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla

In dit voorbeeld wordt een Car klasse gedeclareerd met brand en model eigenschappen en een drive methode.

Klasse-erfopvolging

Klassen kunnen erven van andere klassen. Door erfopvolging te gebruiken, kun je een nieuwe klasse maken op basis van een bestaande klasse en extra functionaliteit eraan toevoegen.

 1class Animal {
 2    constructor(name) {
 3        this.name = name;
 4    }
 5
 6    speak() {
 7        console.log(`${this.name} makes a noise`);
 8    }
 9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13    constructor(name, breed) {
14        super(name); // Call the constructor of the parent class (Animal)
15        this.breed = breed;
16    }
17
18    // Override the method
19    speak() {
20        console.log(`${this.name} barks`);
21    }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks

In dit voorbeeld erft de Dog klasse van de Animal klasse.

• Het sleutelwoord extends wordt gebruikt om te erven van de Animal klasse.
• In de constructor van de Dog klasse wordt super() gebruikt om de constructor van de bovenliggende klasse aan te roepen. Dit stelt je in staat het initiatieproces van de bovenliggende klasse te erven.
• Binnen de geërfde klasse kun je de methoden van de bovenliggende klasse overschrijven. In dit voorbeeld wordt in plaats van "Rex maakt geluid" "Rex blaft" weergegeven.

Statische Methoden

Wanneer je een statische methode definieert binnen een klasse, wordt de methode gekoppeld aan de klasse zelf. Statische methoden kunnen worden aangeroepen zonder te worden geïnstantieerd.

1class MathUtils {
2    // Static method
3    static add(a, b) {
4        return a + b;
5    }
6}
7
8console.log(MathUtils.add(5, 10)); // 15

In dit voorbeeld heeft de MathUtils-klasse een statische methode add gedefinieerd.

• Het static trefwoord wordt gebruikt om een statische methode te definiëren.
• Statische methoden behoren niet tot klasse-instanties en kunnen rechtstreeks vanuit de klasse zelf worden aangeroepen.

Getters en Setters

Door getters en setters in een klasse te definiëren, kun je het ophalen en instellen van eigenschappen inkapselen.

 1class Rectangle {
 2    constructor(width, height) {
 3        this.width = width;
 4        this.height = height;
 5    }
 6
 7    // Getter
 8    get area() {
 9        return this.width * this.height;
10    }
11
12    // Setter
13    set widthValue(newWidth) {
14        this.width = newWidth;
15    }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300

In dit voorbeeld definieert de Rectangle-klasse een area getter en een widthValue setter.

• Getter (get) wordt aangeroepen bij het ophalen van de waarde van een eigenschap.
• Setter (set) wordt aangeroepen bij het instellen van de waarde van een eigenschap.

Klasse Syntax Sugar

In JavaScript wordt klasse-syntax intern geïmplementeerd met behulp van constructorfuncties en prototypes. Klasse-syntax is syntactische sugar om dit op een beknoptere manier te schrijven.

 1// Example without using class syntax
 2function Person(name, age) {
 3    this.name = name;
 4    this.age = age;
 5}
 6
 7Person.prototype.greet = function() {
 8    return `Hello, my name is ${this.name}`;
 9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice

In dit voorbeeld is een constructorfunctie Person gedefinieerd, en de greet-methode is gedefinieerd met behulp van een prototype.

Omgaan met this

Het trefwoord this binnen een klasse verwijst naar de instantie van die klasse. Echter, bij het omgaan met this in klassemethode moet je je ervan bewust zijn dat het gedrag kan variëren afhankelijk van de scope. Problemen kunnen vooral optreden bij het gebruiken van methoden als callbackfuncties.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.

In dergelijke gevallen, wanneer het als een callback aan setTimeout wordt doorgegeven, kan de verwijzing waar this naar wijst veranderen. Om dit probleem te voorkomen, wordt aanbevolen om this te fixeren met behulp van de bind-methode of pijlfuncties te gebruiken.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);

Samenvatting

• Klassen worden gebruikt als blauwdrukken om objecten te maken, eigenschappen en methoden te definiëren.
• Je kunt overerving gebruiken om een klasse uit te breiden, met gebruikmaking van objectgeoriënteerde concepten.
• Statische methoden behoren tot de klasse zelf en kunnen worden gebruikt zonder een instantie te maken.
• Je kunt eigenschappen inkapselen met behulp van getters en setters.
• De klassensyntaxis van JavaScript is syntax sugar en maakt intern gebruik van prototype-gebaseerde overerving.

Door gebruik te maken van klassen kun je objectgeoriënteerd programmeren natuurlijker aanpakken en de herbruikbaarheid en onderhoudbaarheid van de code verbeteren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video