Leg uit hoe overerving werkt in JavaScript.

Overerving in JavaScript is gebaseerd op prototypes. Elk object heeft een interne eigenschap [[Prototype]] (toegankelijk via __proto__ of Object.getPrototypeOf()), die verwijst naar een ander object.

Wanneer je probeert toegang te krijgen tot een eigenschap of methode van een object, en deze niet direct in het object wordt gevonden, zoekt JavaScript in [[Prototype]] van dat object, vervolgens in [[Prototype]] van het prototype, en zo verder langs de prototypeketen, totdat het einde (Object.prototype) wordt bereikt, waarvan [[Prototype]] null is.

Dit is prototype-gebaseerde overerving.

In ECMAScript 2015 (ES6) zijn classes een syntactisch suiker over prototype-overerving. Ze bieden een meer vertrouwde syntax voor het werken met prototypes en het creëren van objecthiërarchieën.

Voorbeeld van gebruik van prototype-overerving vóór ES6:

// Constructor van de ouder
function Animal(name) {
  this.name = name;
}

// Methode van de ouder op het prototype
Animal.prototype.sayHi = function() {
  console.log(`Hallo, ik ben ${this.name}`);
};

// Constructor van de kind
function Dog(name, breed) {
  // Aanroepen van de constructor van de ouder
  Animal.call(this, name);
  this.breed = breed;
}

// Zet het prototype van de kind op het prototype van de ouder
// Behoud de verwijzing naar de constructor Dog
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Voeg een methode toe aan de kind
Dog.prototype.bark = function() {
  console.log("Woef-woef!");
};

// Maak een instantie van de kind
const myDog = new Dog("Bobby", "Labrador");

// Gebruik de methoden van de ouder en de kind
myDog.sayHi(); // Output: Hallo, ik ben Bobby
myDog.bark();  // Output: Woef-woef!

Voorbeeld van gebruik van classes (ES6):

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

  sayHi() {
    console.log(`Hallo, ik ben ${this.name}`);
  }
}

// Kindklasse die erft van Animal
class Dog extends Animal {
  constructor(name, breed) {
    // Aanroepen van de ouder constructor
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Woef-woef!");
  }
}

// Maak een instantie van de kindklasse
const myDog = new Dog("Rex", "Duitse herder");

// Gebruik de methoden van de ouder en de kind
myDog.sayHi(); // Output: Hallo, ik ben Rex
myDog.bark();  // Output: Woef-woef!

Belangrijke punten van overerving in JavaScript:

• Prototypes: Elk object heeft een prototype.
• Prototypeketen: Bij het zoeken naar een eigenschap of methode wordt de keten omhoog doorlopen.
• [[Prototype]]: Interne eigenschap die naar het prototype wijst.
• __proto__: Verouderde, maar veelgebruikte manier om toegang te krijgen tot [[Prototype]].
• Object.getPrototypeOf(): Aanbevolen manier om toegang te krijgen tot [[Prototype]].
• Constructors en prototype: Gebruikt vóór ES6 om objecten te maken en hun prototypes in te stellen.
• Classes (ES6): Syntactische suiker voor prototype-overerving met behulp van class, extends, super.