Programmeren in JavaScript/Objecten/Overerving

Overerving in javascript

Inleiding

We hebben gezien hoe we met behulp van een constructor-functie objecten kunnen maken. Maar wat als we vijf verschillende soorten objecten willen maken, die allemaal bepaalde methoden gemeenschappelijk hebben? We kunnen deze gemeenschappelijke methoden natuurlijk in elk van de vijf constructor-functies opnemen. Dat heeft dan wel als nadeel dat als we een kleinigheid aan een van deze methodes willen veranderen, dat we die verandering dan op vijf plaatsen moeten aanbrengen.

Gelukkig is er een alternatief: we maken één object met daarin de gemeenschappelijke methoden. Dit noemen we een prototype-object. Vervolgens geven we aan elk van de constructor-functies een eigenschap prototype mee met als waarde een verwijzing naar het prototype object.

JavaScript-code: Mijn prototype

function MijnPrototype()
{
  this.name = "mijnPrototype";
  this.sterretjes = function(s) {return "***** " + s + " *****";};
  this.toString = function() {return "[object " + this.name + "]";};
}
var mijnPrototype = new MijnPrototype();

function constructorA(s)
{
    this.name = "Object type A: " + s;
}
constructorA.prototype = mijnPrototype;

function constructorB(s)
{
    this.name = "Object type B: " + s;
}
constructorB.prototype = mijnPrototype;

var A1 = new constructorA(1);
var A2 = new constructorA(2);
var B1 = new constructorB(1);

writeln(A1.toString());
writeln(A2.toString());
writeln(B1.toString());

// uitvoer:

//[object Object type A: 1]
//[object Object type A: 2]
//[object Object type B: 1]

Een prototype is dus een soort van een "model" object, dat gebruikt kan worden om andere objecten te maken met (om te beginnen) dezelfde eigenschappen en methoden als het prototype. Anders gezegd: Een prototype is een object waarvan andere objecten eigenschappen en methoden erven.

Ieder object heeft een prototype

Het prototype van een object kan opgevraagd worden met:

JavaScript-code: Prototype opvragen

var proto = Object.getPrototypeOf(object); // beschikbaar vanaf IE9
writeln(proto);

Omdat ieder prototype een object is en dus zelf ook een prototype heeft, is het interessant de ketting van prototypes te volgen:

JavaScript-code: Erven doe je van meerdere generaties

var proto = document.getElementById("writespace");
while (proto != null)
{
  var proto = Object.getPrototypeOf(proto);
  writeln(proto);
}
 
// Het resultaat:

//[object HTMLDivElementPrototype]
//[object HTMLElementPrototype]
//[object ElementPrototype]
//[object NodePrototype]
//[object Object]
//null

Als we dit doen voor het object A1 uit het voorbeeld hierboven is het resultaat:

JavaScript-code: De erflijn van object "A1"

[object mijnPrototype]
[object Object]
[object Object]
null

Daarmee wordt meteen duidelijk waarom in de constructor van het prototype de methode toString is zoals hij is.