Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Overerving Begrijpen met Extends en Super() | Beheersing van JavaScript-Klassen en Overerving
Geavanceerde JavaScript-Beheersing

bookOvererving Begrijpen met Extends en Super()

Wat is klasse-erfelijkheid?

JavaScript gebruikt het sleutelwoord extends om deze relatie tussen klassen tot stand te brengen. Een subklasse kan eigen eigenschappen en methoden toevoegen of die van de bovenliggende klasse overschrijven.

Beschouw een subklasse als een gespecialiseerde versie van de bovenliggende klasse. Als de bovenliggende klasse een blauwdruk voor een auto is, kan de subklasse een specifiek type auto voorstellen, zoals een elektrische auto. De elektrische auto erft de basisfunctionaliteit (wielen, besturing) maar kan functies toevoegen of aanpassen (batterij, laadsysteem).

Hoe het extends-sleutelwoord te gebruiken

Het sleutelwoord extends wordt gebruikt om een klasse van een andere klasse te laten erven. De subklasse erft alle eigenschappen en methoden van de bovenliggende klasse.


              
1234567891011121314151617181920

            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!
copy

In dit voorbeeld breidt de Dog-klasse de Animal-klasse uit en erft de makeSound()-methode van de bovenliggende klasse. De Dog-klasse voegt daarnaast zijn eigen bark()-methode toe.

Werken met de constructor in een subklasse

Bij het aanmaken van een subklasse moeten vaak zowel de eigen eigenschappen als die van de bovenliggende klasse worden geïnitialiseerd. Dit gebeurt via de constructor-methode. Om ervoor te zorgen dat de bovenliggende klasse correct wordt geïnitialiseerd, moet de functie super() worden gebruikt om de constructor van de bovenliggende klasse aan te roepen.

Belangrijk: Wanneer een subklasse een constructor heeft, moet super() worden aangeroepen voordat this wordt gebruikt; anders treedt er een fout op.

Gebruik van super() om de constructor van de bovenliggende klasse aan te roepen

De functie super() wordt gebruikt om de constructor van de bovenliggende klasse aan te roepen vanuit de constructor van de subklasse. Dit zorgt ervoor dat alle eigenschappen of logica die in de constructor van de bovenliggende klasse zijn gedefinieerd, correct worden geïnitialiseerd voordat nieuwe functionaliteit in de subklasse wordt toegevoegd.


              
1234567891011121314151617181920212223242526

            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!
copy

In dit voorbeeld hebben we een basisklasse genaamd Animal met een constructor die de eigenschap name initialiseert en een methode makeSound die een generiek geluidsbericht logt. De klasse Dog breidt Animal uit en voegt een eigen constructor toe die zowel name als breed als argumenten accepteert. Binnen de constructor van Dog wordt de functie super() gebruikt om de constructor van de bovenliggende klasse aan te roepen, zodat name correct wordt ingesteld. Daarnaast introduceert Dog een nieuwe methode, bark, die een bericht logt dat specifiek is voor het ras van de hond. Wanneer we een nieuw Dog-object aanmaken met de naam Rex van het ras German Shepherd, kunnen we zowel makeSound als bark aanroepen, waarmee het geërfde en nieuwe gedrag wordt getoond.

Belangrijke punten bij het gebruik van extends en super()

Overerving: Het sleutelwoord extends zorgt ervoor dat de subklasse eigenschappen en methoden van de bovenliggende klasse erft.

Constructor in subklasse: Bij het definiëren van een constructor in de subklasse altijd super() gebruiken om de constructor van de bovenliggende klasse aan te roepen.

Toegang tot this: super() moet worden aangeroepen voordat this in de constructor van de subklasse wordt gebruikt.

Methode-overschrijving: Methoden van de bovenliggende klasse kunnen worden overschreven in de subklasse door een methode met dezelfde naam te definiëren. Met super.methodName() kan de methode van de bovenliggende klasse vanuit de subklasse worden aangeroepen indien nodig.

Voorbeeld: Methoden overschrijven en gebruik van super()

Soms is het wenselijk om een methode uit de bovenliggende klasse te overschrijven in de subklasse, maar toch de methode van de bovenliggende klasse aan te roepen als onderdeel van de nieuwe logica. Dit kan worden gedaan met super.methodName().


              
1234567891011121314151617181920212223242526272829

            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.
copy

In dit voorbeeld overschrijft de klasse Dog de methode makeSound, maar roept nog steeds de methode makeSound van de bovenliggende klasse aan met super.makeSound(). Hierdoor kan de subklasse het gedrag van de bovenliggende klasse uitbreiden zonder het volledig te vervangen.

Praktijkvoorbeeld: Employee- en Manager-klassen

Beschouw een scenario waarin we een Employee-klasse en een Manager-klasse hebben die deze uitbreidt. De Manager-klasse voegt extra functionaliteit toe bovenop de basisfunctionaliteit van Employee.


              
12345678910111213141516171819202122232425262728

            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.
copy

In dit voorbeeld breidt de Manager-klasse de Employee-klasse uit door een nieuwe eigenschap department toe te voegen. De methode getDetails() in de Manager-klasse roept de methode van de bovenliggende klasse aan via super.getDetails() en voegt vervolgens afdelingsspecifieke informatie toe.

1. Wat doet het sleutelwoord extends?

2. Waarom gebruiken we super() in de constructor van een subklasse?

3. Wat zal de volgende code als uitvoer geven?

question mark

Wat doet het sleutelwoord extends?

Select the correct answer

question mark

Waarom gebruiken we super() in de constructor van een subklasse?

Select the correct answer

question mark

Wat zal de volgende code als uitvoer geven?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 14

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you explain more about how method overriding works in JavaScript?

What happens if I forget to call super() in the child class constructor?

Can you give more real-world examples of class inheritance?

Awesome!

Completion rate improved to 2.22

bookOvererving Begrijpen met Extends en Super()

Veeg om het menu te tonen

Wat is klasse-erfelijkheid?

JavaScript gebruikt het sleutelwoord extends om deze relatie tussen klassen tot stand te brengen. Een subklasse kan eigen eigenschappen en methoden toevoegen of die van de bovenliggende klasse overschrijven.

Beschouw een subklasse als een gespecialiseerde versie van de bovenliggende klasse. Als de bovenliggende klasse een blauwdruk voor een auto is, kan de subklasse een specifiek type auto voorstellen, zoals een elektrische auto. De elektrische auto erft de basisfunctionaliteit (wielen, besturing) maar kan functies toevoegen of aanpassen (batterij, laadsysteem).

Hoe het extends-sleutelwoord te gebruiken

Het sleutelwoord extends wordt gebruikt om een klasse van een andere klasse te laten erven. De subklasse erft alle eigenschappen en methoden van de bovenliggende klasse.


              
1234567891011121314151617181920

            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!
copy

In dit voorbeeld breidt de Dog-klasse de Animal-klasse uit en erft de makeSound()-methode van de bovenliggende klasse. De Dog-klasse voegt daarnaast zijn eigen bark()-methode toe.

Werken met de constructor in een subklasse

Bij het aanmaken van een subklasse moeten vaak zowel de eigen eigenschappen als die van de bovenliggende klasse worden geïnitialiseerd. Dit gebeurt via de constructor-methode. Om ervoor te zorgen dat de bovenliggende klasse correct wordt geïnitialiseerd, moet de functie super() worden gebruikt om de constructor van de bovenliggende klasse aan te roepen.

Belangrijk: Wanneer een subklasse een constructor heeft, moet super() worden aangeroepen voordat this wordt gebruikt; anders treedt er een fout op.

Gebruik van super() om de constructor van de bovenliggende klasse aan te roepen

De functie super() wordt gebruikt om de constructor van de bovenliggende klasse aan te roepen vanuit de constructor van de subklasse. Dit zorgt ervoor dat alle eigenschappen of logica die in de constructor van de bovenliggende klasse zijn gedefinieerd, correct worden geïnitialiseerd voordat nieuwe functionaliteit in de subklasse wordt toegevoegd.


              
1234567891011121314151617181920212223242526

            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!
copy

In dit voorbeeld hebben we een basisklasse genaamd Animal met een constructor die de eigenschap name initialiseert en een methode makeSound die een generiek geluidsbericht logt. De klasse Dog breidt Animal uit en voegt een eigen constructor toe die zowel name als breed als argumenten accepteert. Binnen de constructor van Dog wordt de functie super() gebruikt om de constructor van de bovenliggende klasse aan te roepen, zodat name correct wordt ingesteld. Daarnaast introduceert Dog een nieuwe methode, bark, die een bericht logt dat specifiek is voor het ras van de hond. Wanneer we een nieuw Dog-object aanmaken met de naam Rex van het ras German Shepherd, kunnen we zowel makeSound als bark aanroepen, waarmee het geërfde en nieuwe gedrag wordt getoond.

Belangrijke punten bij het gebruik van extends en super()

Overerving: Het sleutelwoord extends zorgt ervoor dat de subklasse eigenschappen en methoden van de bovenliggende klasse erft.

Constructor in subklasse: Bij het definiëren van een constructor in de subklasse altijd super() gebruiken om de constructor van de bovenliggende klasse aan te roepen.

Toegang tot this: super() moet worden aangeroepen voordat this in de constructor van de subklasse wordt gebruikt.

Methode-overschrijving: Methoden van de bovenliggende klasse kunnen worden overschreven in de subklasse door een methode met dezelfde naam te definiëren. Met super.methodName() kan de methode van de bovenliggende klasse vanuit de subklasse worden aangeroepen indien nodig.

Voorbeeld: Methoden overschrijven en gebruik van super()

Soms is het wenselijk om een methode uit de bovenliggende klasse te overschrijven in de subklasse, maar toch de methode van de bovenliggende klasse aan te roepen als onderdeel van de nieuwe logica. Dit kan worden gedaan met super.methodName().


              
1234567891011121314151617181920212223242526272829

            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.
copy

In dit voorbeeld overschrijft de klasse Dog de methode makeSound, maar roept nog steeds de methode makeSound van de bovenliggende klasse aan met super.makeSound(). Hierdoor kan de subklasse het gedrag van de bovenliggende klasse uitbreiden zonder het volledig te vervangen.

Praktijkvoorbeeld: Employee- en Manager-klassen

Beschouw een scenario waarin we een Employee-klasse en een Manager-klasse hebben die deze uitbreidt. De Manager-klasse voegt extra functionaliteit toe bovenop de basisfunctionaliteit van Employee.


              
12345678910111213141516171819202122232425262728

            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.
copy

In dit voorbeeld breidt de Manager-klasse de Employee-klasse uit door een nieuwe eigenschap department toe te voegen. De methode getDetails() in de Manager-klasse roept de methode van de bovenliggende klasse aan via super.getDetails() en voegt vervolgens afdelingsspecifieke informatie toe.

1. Wat doet het sleutelwoord extends?

2. Waarom gebruiken we super() in de constructor van een subklasse?

3. Wat zal de volgende code als uitvoer geven?

question mark

Wat doet het sleutelwoord extends?

Select the correct answer

question mark

Waarom gebruiken we super() in de constructor van een subklasse?

Select the correct answer

question mark

Wat zal de volgende code als uitvoer geven?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 14
some-alt