In deze tutorial zal ik proberen uit te leggen wat het nut is van het prototype binnen JavaScript.
In JavaScript mag je attributen toevoegen aan zowel bestaande als zelfgemaakte objecten.
Een voorbeeldje:
- Code: Selecteer alles
// Attribuut toevoegen aan bestaand object
var imgPlaatje = new Image();
imgPlaatje.size = "10Kb";
// Attribuut toevoegen aan zelfgemaakt object
// Zelfgemaakte object: fiets
function fiets()
{
...
}
var RaceFiets = new fiets();
RaceFiets.kleur = "roze";
In dit geval is het attribuut kleur enkel aanwezig voor de instantie Racefiets. Stel dat we nog een instantie van fiets aanmaken (var opoefiets = new fiets(); ) , dan zou deze instantie "undefined" retourneren wanneer we het attribuut kleur op zouden vragen.
Soms wil je een attribuut toevoegen aan een object wat enkel voor een bepaalde instantie geldt. (zoals het voorbeeld hierboven) Maar je kan je voorstellen dat het soms ook wel handig is dat wanneer je een attribuut toevoegt, dat deze beschikbaar is voor alle instanties. Dus dat elke instantie van het object fiets een attribuut kleur zou bevatten.
Voor dit laatste is er het object prototype.
Meteen een voorbeeldje:
- Code: Selecteer alles
// Object fiets
function fiets()
{
...
}
// voeg aan het object fiets het attribuut kleur toe.
fiets.prototype.kleur = "roze";
In het voorbeeld hierboven wordt het attribuut kleur aan het object toegevoegd. Dit attribuut is beschikbaar in alle instanties van dit object.
Ditzelfde "truucje" kun je ook gebruiken om methoden aan een object toe te voegen.
Voorbeeldje:
- Code: Selecteer alles
// object fiets
function fiets()
{
...
}
// methode vooruit() toevoegen
fiets.prototype.vooruit = new Function() { ... }
// Instantie van fiets aanmaken
var RaceFiets = new fiets();
// methode aanroepen
RaceFiets.vooruit();
Nu bevatten alle instanties van het object fiets de methode vooruit();
Op deze manier kun je dus heel eenvoudig zelf objecten maken met methoden en attributen.
Natuurlijk kan het ook zo:
- Code: Selecteer alles
function fiets()
{
this.vooruit = new Function()
{
...
}
}
Het probleem wat dan snel om de hoek komt kijken is overzichtelijkheid. Een functie van enkele honderden regels lang is natuurlijk verre van overzichtelijk.
Hopelijk hebben jullie wat aan mijn uitleg. Toen ik met het prototype-object in aanraking kwam heb ik het meteen flink gebruikt.
