Zelf objecten maken en gebruiken

Een object is een verzameling bij elkaar horende gegevens, bijvoorbeeld Naam-Adres-Woonplaats-gegevens, die als één geheel kunnen worden bewerkt en opgeslagen.
JavaScript bevat een aantal kant-en-klare standaard-objecten, die je zo kunt gebruiken. De bekendste voorbeelden zijn wellicht Array() en Date(). Je kunt echter ook je eigen objecten maken. Veel (beginnende) programmeurs vermijden dat liever; onbekend maakt immers onbemind. Toch is het helemaal niet moeilijk.

Op deze pagina wordt uit de doeken gedaan hoe je je eigen objecten maakt en hoe je ze kunt gebruiken.

Je maakt een object met een constructor. Dat is een soort function waarin je definieert welke data in het object kunnen worden opgeslagen en welke methodes aan het object zijn gekoppeld.
Elk object heeft eigenschappen (properties). Zo heb je bij de objecten String en Array de property length, waarmee je het aantal karakters in de string, resp. het aantal elementen in de array opvraagt.

Aan veel objecten zijn functions (methodes, methods) gekoppeld, waarmee bewerkingen op de data in het object kunnen worden uitgevoerd. Zie de code om de datum van vandaag op te halen:

/* Maak een nieuw Date-object aan. Het wordt automatisch gevuld met de stand van de systeemklok. Zet het nieuwe object in nu */
var nu = new Date();
/* Bereken de datum van vandaag en sla het resultaat op in vandaag */
var vandaag = nu.getDate()

Om een object te gaan gebruiken, moet je er eerst ruimte in het geheugen voor reserveren en die ruimte toekennen aan een variabele. Dat doe je met het keyword new:

var mijn_object = new Date()

Je kunt mijn_object nu gebruiken. De beschikbare properties en methods benader je met:

mijn_object.property en mijn_object.method()

Als voorbeeld wordt een object gemaakt waarin Naam-Adres-Woonplaats-gegevens worden opgeslagen.
Het object krijgt de naam "naw". Daarin komen de volgende gegevens te staan:

• Voornaam, Achternaam
• Adres, Postcode, Woonplaats
• E-mail adres

De constructor
De constructor is een JavaScript-function waarmee je een object definieert. Binnen de constructor gebruik het keyword this, gevolgd door een punt en de naam van de property of de method. In dit voorbeeld is de code:

function naw(voorn,achtern,adr,pc,woonpl,email) {
  /* Properties */
  this.Voornaam = voorn;
  this.Achternaam = achtern;
  this.Adres = adr;
  this.Postcode = pc;
  this.Woonplaats = woonpl;
  this.Emailadres = email;
}

Er zijn hier alleen properties gemaakt, zodat er data in kunnen worden opgeslagen. Er zijn nog geen methods toegevoegd.

De methods
Voor het beheren van de N-A-W-gegevens in het object kun je diverse methodes bedenken. De meest voor de hand liggende zijn:

• Wijzig de voor- en achternaam.
• Wijzig het adres, postcode en woonplaats.
• Wijzig het e-mail adres.
• Maak het hele object leeg

We moeten nu twee dingen doen:

1. Een koppeling maken in het object
2. De method-functions definiëren

Een koppeling maken in het object
De koppeling maak je op dezelfde manier als bij een property. In plaats van een gegevens-item, geef je nu de naam van de betreffende method op. Omdat er voor de method een function beschikbaar is, de de JavaScript-processor in staat het onderscheid te maken.

De constructor wordt nu als volgt uitgebreid:

function naw(voorn,achtern,adr,pc,woonpl,email) {
  /* Properties */
  this.Voornaam = voorn;
  this.Achternaam = achtern;
  this.Adres = adr;
  this.Postcode = pc;
  this.Woonplaats = woonpl;
  this.Emailadres = email;
 
  /* Methods*/
  this.BeheerNamen = BeheerNamen;
  this.BeheerAdres = BeheerAdres
  this.BeheerEmail = BeheerEmail
 
  this.InitObject = InitNAW
}

de function naw() wordt het prototype genoemd. De 'echte' objecten (waar de data in wordt opgeslagen) zijn hier van af geleid.

De method-functions definiëren
In het bovenstaande zijn vier verschillende methods gedeclareerd. Hieronder staan de bijbehorende functions:

function BeheerNamen(voorn,achtern) {
  this.Voornaam = voorn;
  this.Achternaam = achtern;
}
 
function BeheerAdres(adr,pc,woonpl) {
  this.Adres = adr;
  this.Postcode = pc;
  this.Woonplaats = woonpl;
}
 
function BeheerEmail(email) {
  this.Emailadres = email;
}
 
function InitNAW(){ /* Maak het object NAW leeg */
  this.Voornaam = "";
  this.Achternaam = "";
  this.Adres = "";
  this.Postcode = "";
  this.Woonplaats = "";
  this.Emailadres = "";
}

Het object gebruiken
Stel: je maakt een naw-object aan met:

var gegevens = new naw('Jan','Klasen','Poppenkastweg 21',
'9876 JK','Sprookjesdorp','janklasenenkatrijn@vermaak.org');

Je kunt het adres veranderen van Poppenkastweg 21 in Poppenkastlaan 56 met behulp van:

var mijn_pc = gegevens.Postcode;
van mijn_wpl = gegevens.Woonplaats;
gegevens.BeheerAdres('Poppenkastlaan 56',mijn_pc,mijn_wpl)

De properties Postcode en Woonplaats worden eerst apart opgehaald om de method BeheerAdres() correct te kunnen aanroepen.

De method InitNAW() is bedoeld om de gegevens in het object te wissen. Het object zelf kun je wissen met behulp van het JavaScript-keyword delete.
Het naw-object gegevens in het bovenstaande voorbeeld wis je met:

delete gegevens;

Het object wijzigen 'at runtime'
Aan JavaScript-objecten kun je eenvoudig properties en methods toevoegen en verwijderen:

• Je voegt een property toe door hem te benoemen. Als je bijvoorbeeld de property Leeftijd wilt toevoegen aan het naw-object gegevens uit het voorbeeld, doe je dat met:

  gegevens.Leeftijd='35';

• Als je de property Emailadres uit het object wilt verwijderen doe je dat met:

  delete gegevens.Emailadres;

Als je op deze wijze met objecten omgaat, kun je tegen zij-effecten oplopen.
Stel: je hebt aan gegevens de property Leeftijd toegevoegd en je het Emailadres verwijderd, zoals hierboven is genoemd.

• Als je een nieuw object van het type naw maakt, bevat dat geen property Leeftijd, maar wel de property Emailadres. Dit is eenvoudig te omzeilen door het naw-object te wijzigen. Dat betekent dat je de code van de function naw() moet wijzigen. Daarvoor heeft JavaScript het keyword prototype.
  Om de eigenschap Leeftijd aan het naw-object toe te voegen gebruik je:

  naw.prototype.Leeftijd = "";

  Hiermee worden alle bestaande en nieuwe naw-objecten gewijzigd.
  Om de eigenschap Emaiadres uit het naw-object te verwijderen gebruik je:

  delete naw.prototype.Emailadres;

  Ook hier worden alle bestaande en nieuwe naw-objecten gewijzigd. 
  
• Als je de method InitNAW() gebruikt wordt Leeftijd niet leeggemaakt. Ook ontstaat er een foutconditie omdat de property Emailadres niet meer bestaat. Om deze twee problemen op te lossen moet je de methode InitObject aanpassen. Dat betekent dat de function InitNAW() moet worden vervangen door een andere, bijvoorbeeld InitNAW_2(). Natuurlijk moet je dat ook in het object verwerken. Dat doe je met:

  naw.prototype.initObject = initNAW_2();

  De code van InitNAW_2() luidt:

  function InitNAW_2(){ /* Maak het object NAW leeg */
    this.Voornaam = "";
    this.Achternaam = "";
    this.Adres = "";
    this.Postcode = "";
    this.Woonplaats = "";
    this.Leeftijd = ""; /* Nieuw, Emailadres is verwijderd */
  }

Andere manieren om objecten te maken
Er zijn meer manieren om een object te maken. Behalve de hierboven genoemde methode kan het ook zonder prototype:

var gegevens = new Object();
  gegevens.Voornaam = "Jan";
  gegevens.Achternaam = "Klasen";
  gegevens.Adres = "Poppenkastweg 21";
  gegevens.Postcode = "9876 JK";
  gegevens.Woonplaats = "Sprookjesdorp";
  gegevens.Emailadres = "'janklasenenkatrijn@vermaak.org";

Dit kan ook compacter worden geschreven als:

var personObj = {Voornaam:"Jan",Achternaam:"Klasen",
Adres:"Poppenkastweg 21",Postcode:"9876 JK",
Woonplaats:"Sprookjesdorp", Emailadres:"'janklasenenkatrijn@vermaak.org"};

Zoals je ziet lijkt dit op de definitie van een Array (en feitelijk is dat ook zo; een object in JavaScript niet veel meer dan een lijst van eigenschappen en methodes met bijbehorende waarde).
Deze schrijfwijze leidt gemakkelijk tot moeilijk leesbare code. Daarom raad ik hem niet aan.

Mocht je onverhoopt een leeg object nodig hebben: Dat maak je eenvoudig met var abc = {}.

Tenslotte
JavaScript-objecten worden vaak ingezet in combinatie met een formulier. Het zou voor de gebruiker handig kunnen zijn als de formulier-informatie bewaard zou kunnen worden in de browser zelf. Als het formulier bij een volgend bezoek aan de website weer wordt geopend, wordt de informatie weer getoond. Dat kun je regelen met een cookie of met XML, maar dat is lastig. je kunt daar ook JSON voor inzetten. Dat heeft het voordeel dat je het hele object in een keer kunt bewaren. JSON is ook handig om data uit ter wisselen met een server en/of database. Zie daarvoor het item JSON: Wat het is en hoe je het kunt gebruiken.

Opmerking:
 
Objecten, zeker de objecten die een speciale datastructuur bevatten, hebben vaak aparte functions nodig om met groepen objecten te kunnen werken, bijvoorbeeld rekenen met complexe getallen en in de lineaire algebra (2D en 3D).