JS - Objecteigenschappen

Eigenschappen benaderen

Je kan de waarde van een eigenschap opvragen op 3 manieren:

1. met de naam van de eigenschap:
   objectNaam.eigenschap: persoon.voornaam
2. met een string indexer en doen alsof het een associatieve array is
   objectNaam['eigenschap']: persoon['voornaam']
3. met een expressie die de naam van een eigenschap oplevert
   objectNaam[expressie]: x = 'voornaam'; persoon[x]

JavaScript for ... in lus

Je kan door een 'gewone' array lopen met de for lus door gebruik te maken van een index integer. Objecten in JavaScript zijn geen arrays en dus hebben we een andere construct nodig. Met de for ... in lus kan je door de eigenschappen van een object lopen.

Methoden: functies zijn data

Een eigenschap van een object kan naar een functie verwijzen omdat functies in JavaScript data zijn. En om mee te doen aan de OO mode, wordt er gezegd dat eigenschappen die naar functies verwijzen methoden zijn. In het voorbeeld hieronder is de eigenschap zegt een methode:

var persoon = {
   voornaam: 'Jef',
   zegt: function () {
     alert('Hello world!');
   }
}

this

In het volgende voorbeeld moet de methode weten op welk object het van toepassing is. Als er verschillen persoonobjecten zijn moet de zegt methode weten wie spreekt. JavaScript beschikt over een speciale variabele met de naam this die je kan gebruiken om aan te geven op welk object de methode van toepassing is.

See the Pen JavaScript - this (1) by Jef Inghelbrecht (@jef) on CodePen.

Een eigenschap toevoegen

Je kan op elk moment eigenschappen aan een bestaand object toevoegen. We voegen de eigenschappen geboortedatum, nationaliteit toe aan het object persoon:

See the Pen JavaScript - Objecten - Eigenschap toevoegen by Jef Inghelbrecht (@jef) on CodePen.

Een eigenschap deleten

In JavaScript kan je op elk moment eigenschappen, en dus ook methoden, deleten. We vertrekken van de volgende code:

var persoon = {
   voornaam: 'Jef',
   geslacht: 'man'
   adres: {
      straat: 'Rue des Blancs Manteaux 38';
      postcode: '75001';
      stad: 'Paris'
}

}

We deleten eerst de straat eigenschap:

delete persoon.adres.straat;

We hebben nu geen toegang meer tot de eigenschap adres:

persoon.adres.street;
"undefined"