Programmeren in JavaScript/Objecten/Methoden

Inleiding

In de inleiding over objecten hebben we al kennis gemaakt met een object om een adres in op te slaan:

JavaScript-code: Object "adres" aanmaken

var AdresJan = new Object();      // maak een object zonder eigenschappen (zie later)                             
AdresJan.straat = "Poppenstraat"; // hiermee wordt een eigenschap "straat" aan het object toegevoegd
AdresJan.huisnummer = 23;
AdresJan.postcode = "9999 ZZ";
AdresJan.woonplaats = "Poppenkast";

Objectnamen in expressies

Een expressie van de vorm

JavaScript-code: Object aan variabele toewijzen

var x = objectnaam;

Geeft de variable x een waarde die aangeeft waar het object "objectnaam" is opgeslagen. Het type van deze waarde is "object".

Aan een object kan (net als aan een variabele) een naam worden toegewezen. Er is echter een groot verschil: in een expressie van de vorm (x = y) waarbij y een variabele is, wordt x vervangen door de inhoud van het stukje geheugen dat bij de variabele y hoort, terwijl wanneer y een object is, x wordt vervangen door een verwijzing naar het object in het geheugen (een object is dus een wezenlijk andere gegevenssoort dan getal, string of boolean).

Als Katrijn bij Jan Klaassen gaat wonen, kunnen we haar adres eenvoudig veranderen:

JavaScript-code: Object aan variabele toewijzen

 var AdresKatrijn = AdresJan;

Maar pas op: AdresKatrijn en AdresJan zijn nu gelijk aan elkaar, dat wil zeggen ze "wijzen" naar hetzelfde object.

dus met:

JavaScript-code: Verhuizen

AdresKatrijn.straat = "Ergens Anders Straat";

Verandert zowel het adres van Katrijn als dat van Jan!!!

Methoden

Een functie die onderdeel is van een object noemen we een methode. Het kan iets doen met de eigenschappen van het object.

Als voorbeeld gebruiken we een object om het gedrag van een schemerlamp te beschrijven:

JavaScript-code: Mijn schemerlamp

//
// maak het object en voeg properties en methods toe 
//
var MijnLamp = new Object();
MijnLamp.geeftlicht = false;
MijnLamp.aan = function()
{
  MijnLamp.geeftlicht = true;
}
MijnLamp.uit = function()
{
  MijnLamp.geeftlicht = false;
}
MijnLamp.drukopknop = function ()
{
  MijnLamp.geeftlicht = !MijnLamp.geeftlicht;
} 
//
// gebruik het object 
//
MijnLamp.aan(); // geeft licht
MijnLamp.uit(); // het is donker
MijnLamp.drukopknop(); // weer licht
MijnLamp.drukopknop(); // en weer donker

Classes

Het zou vervelend zijn als we vergelijkbare objecten steeds weer opnieuw van eigenschappen en vooral methoden zouden moeten voorzien. Dat hoeft gelukkig niet.

Een class is een model voor een object. Het geeft aan hoe een object gemaakt moet worden en welke eigenschappen en functies het object moet bezitten. Als we de dierensoort "vogel" vergelijken met een class, dan is de vogel die door jouw tuin hipt te vergelijken met een object.

Binnen JavaScript wordt een class weergegeven als een functie waarmee een object gemaakt kan worden. Zo'n functie noemen we een constructor. De meest eenvoudige constructor binnen JavaScript is "Object()", waarmee een object zonder eigenschappen en methoden kan worden gemaakt. Andere constructors zijn "Array()" waarmee een object van de klasse array gemaakt kan worden en "Date()" waarmee een object van de klasse date (datum) gemaakt kan worden.

Een object wordt gemaakt door gebruik te maken van het keyword "new"

JavaScript-code: Object aanmaken

var mijnobject = new Object();

Eerst wordt een variabele mijnobject gemaakt. Vervolgens wordt een nieuw object aangemaakt van de klasse "Object". Ten slotte wordt een verwijzing naar dit object in de variabele "mijnobject" opgeslagen.

Voor het voorbeeld van de lamp ziet de constructor er als volgt uit:

JavaScript-code: Class definiëren

function Lamp()
{
    this.geeftlicht = false;
    this.aan = function()
    {
      this.geeftlicht = true;
    }
    this.uit = function()
    {
      this.geeftlicht = false;
    }    
    this.drukopknop = function ()
    {
      if (this.geeftlicht) this.uit(); else this.aan();
    }
}

Bovenstaande functie noemen we de "constructor" van een klasse. In een constructor bevat de variabele this een verwijzing naar het object dat wordt aangemaakt. Zo'n variabele this is nodig omdat we op het moment waarop de constructor geschreven wordt nog niet weten hoe het nieuwe object gaat heten.

We kunnen de constructor nu gebruiken om een object mijnlamp te maken:

JavaScript-code: Nieuwe lamp aanmaken

var mijnlamp = new Lamp();
mijnlamp.drukopknop();

In gedachten kunnen we de variabele this in de constructor vervangen door mijnlamp.

Meer algemeen is de variabele this een verwijzing naar het object waarvan de functie op het moment van aanroep een methode is. Maar let op: this verwijst niet automatisch naar het object waarin de functie is gedeclareerd zoals dat hierboven het geval lijkt te zijn. Dit speelt vooral een rol als we een functie opgeven als eventhandler (later meer).

We kunnen nu net zoveel lampen maken als we willen:

JavaScript-code: Lampenfabriek

var Lamp1 = new Lamp();
var Lamp2 = new Lamp();
Lamp1.aan();
Lamp2.uit();