Wat is prototypisch erf inheritance in JavaScript…

In JavaScript erven objecten eigenschappen en methoden van hun prototypes. Het prototype van elk object is een ander object, waarvan de eigenschappen en methoden toegankelijk zijn via de prototypeketen.

Bij het openen van een eigenschap van een object, zoekt JavaScript eerst direct in het object zelf. Als de eigenschap niet wordt gevonden, wordt er verder gezocht in het prototype van dat object, vervolgens in het prototype van dat prototype, enzovoort, totdat de eigenschap wordt gevonden of het einde van de keten (null) wordt bereikt.

Prototypen-gebaseerde overerving verschilt van klassieke overerving (zoals in Java of C++), waar objecten worden gemaakt uit klassen die hun structuur en gedrag beschrijven. In JavaScript zijn klassen, geïntroduceerd in ES6, een syntactische suiker boven de prototypen-overerving.

Belangrijke aspecten:

__proto__: Interne eigenschap van het object die verwijst naar zijn prototype.
prototype: Eigenschap van de constructor (functie gebruikt als constructor), die verwijst naar het object dat dient als prototype voor de gemaakte instanties.
Object.getPrototypeOf(obj): Standaardmethode om het prototype van een object te krijgen.
Object.setPrototypeOf(obj, proto): Standaardmethode om het prototype van een object in te stellen.

Voorbeeld:

// Constructorfunctie
function Animal(name) {
  this.name = name;
}

// Methode toevoegen aan het prototype Animal
Animal.prototype.sayHello = function() {
  console.log(`Hallo, mijn naam is ${this.name}`);
};

// Instantie maken
const dog = new Animal("Buddy");

// Methode uit het prototype aanroepen
dog.sayHello(); // Output: Hallo, mijn naam is Buddy

// Het prototype van dog is Animal.prototype
console.log(Object.getPrototypeOf(dog) === Animal.prototype); // true

// Het prototype van Animal.prototype is Object.prototype
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype); // true

// Het einde van de prototypeketen is null
console.log(Object.getPrototypeOf(Object.prototype) === null); // true

Vergelijking met klassieke overerving (met gebruik van ES6-klassen):

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

  sayHello() {
    console.log(`Hallo, mijn naam is ${this.name}`);
  }
}

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

  bark() {
    console.log("Woof!");
  }
}

const buddy = new Dog("Buddy", "Golden Retriever");
buddy.sayHello(); // Output: Hallo, mijn naam is Buddy (geërfd van Animal)
buddy.bark(); // Output: Woof! (methode van Dog)

// Klassen in ES6 zijn syntactische suiker boven prototypes
console.log(Object.getPrototypeOf(Dog) === Animal); // true (klasselijke overerving)
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true (overerving van methoden via prototypes)
console.log(Object.getPrototypeOf(buddy) === Dog.prototype); // true (instanties erven van het prototype van de klasse)

Prototypen-overerving is een kernconcept in JavaScript, waarvan begrip essentieel is voor effectief werken met de taal.

Wat is prototypisch erf inheritance in JavaScript?