Sobes.tech
Middle

Wat zijn prototypes in JavaScript?

sobes.tech AI

Antwoord van AI

In JavaScript kunnen objecten eigenschappen en methoden erven van andere objecten via het prototype-mechanisme. Elk object in JavaScript heeft een interne verborgen eigenschap [[Prototype]], die verwijst naar een ander object dat zijn prototype is. Wanneer je toegang krijgt tot een eigenschap of methode van een object, zoekt de JavaScript-engine eerst in het object zelf. Als het niet wordt gevonden, kijkt het naar de eigenschap [[Prototype]] en zoekt in het prototype. Dit proces wordt herhaald langs de prototypeketen totdat de eigenschap wordt gevonden of totdat null wordt bereikt (einde van de keten).

Belangrijke concepten:

  • Prototypeketen: Sequentie van objecten verbonden via de eigenschap [[Prototype]].
  • Erfelijkheid: Objecten erven eigenschappen en methoden van hun prototypes.
  • __proto__: Historisch gebruikte (hoewel niet gestandaardiseerde) eigenschap om toegang te krijgen tot [[Prototype]]. Tegenwoordig wordt het gebruik van Object.getPrototypeOf() aanbevolen.
  • prototype: Eigenschap van de constructor waarnaar [[Prototype]] verwijst in instanties gemaakt met die constructor.

Voorbeeld met constructor en prototype:

// Constructor
function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

// Een instantie maken
const person1 = new Person("Alice", 30);

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

// Toegang tot het prototype van de instantie
console.log(Object.getPrototypeOf(person1) === Person.prototype); // Output: true

In dit voorbeeld:

  • Person is een constructorfunctie.
  • Person.prototype is het object dat dient als prototype voor alle instanties gemaakt met new Person().
  • sayHello is een methode toegevoegd aan het prototype. Alle Person-instanties erven deze methode.
  • Wanneer person1.sayHello() wordt aangeroepen, zoekt de JavaScript-engine sayHello in person1. Als het niet wordt gevonden, kijkt het naar het [[Prototype]] van person1 (dat gelijk is aan Person.prototype) en vindt de methode daar.

Prototypes zorgen voor efficiënt geheugengebruik, omdat methoden en gedeelde eigenschappen in het prototype worden opgeslagen, in plaats van in elke objectinstantie te worden gedupliceerd.