JS - Object Constructor

Objecten, die met de ingebouwde constructor gemaakt worden, zijn beperkt. Je hebt slechts één exemplaar of instanctie. Als je meerdere exemplaren nodig hebt en je dus een soort van 'klasse' nodige nodig hebt op basis waarvan je meerdere objectexemplaren kan maken, maak je een object met een Object Constructor. JavaScript is een prototype-based programmeertaal en bevat geen klassedeclaratie, zoals je dat gewoon bent in C# of Java. Dit kan verwarrend zijn voor programmeurs die komen van een taal met een klassendeclaratie. In JavaScript maak je gebruik van JavaScript-functies als constructors voor de klassen. Het definiëren van een klasse is net zo eenvoudig als het definiëren van een functie.

Beschrijving

Een object met een object constructor maken komt op hetzelfde neer als een functie maken. Zo'n functie wordt ook wel een constructor-functie genoemd.

function Persoon() {
   this.voornaam = 'Jef';
   this.geslacht = 'man';
}

Om een object te maken met behulp van constructor functies heb je de new operator nodig:

var persoon = new Persoon();

persoon.geslacht;

"man"

Met een constructor functie kan je argumenten meegeven bij het maken van een object. We wijzigen ons voorbeeld zodanig dat de constructor twee parameters aanneemt:

function Persoon(voornaam, geslacht) {
   this.voornaam = voornaam;
   this.geslacht = geslacht;
   this.string = function () {
      return 'Ik ben " + this.voornaam + ' en ik ben een ' + this.geslacht + '.';
   };
}

Je kan nu verschillende objecten maken met dezelfde constructor functie:

var jan = new Persoon('Jan', 'man');

var anna = new Persoon('Anna', 'vrouw');

anna.string();

Ik ben Anna en ik ben een vrouw.

jan.string();

Ik ben Jan en ik ben een man.

Tip

Er is een afspraak in JavaScript dat functienamen beginnen met een kleine letter. Maar het is een goede gewoonte de naam van een constructor-functie te laten beginnen met een hoofdletter zodat je een visuele aanwijzing hebt dat die functie geen gewone functie is maar een constructor functie.

`instanceof`

Met de instanceof operator kan je nagaan of een object wel degelijk met een welbepaalde constructor functie werd gecreëerd.

var Persoon = function(voornaam, familienaam) {
   this.voornaam = voornaam;
   this.familienaam = familienaam;
}

persoon = new Persoon('Jean-Paul', 'Sartre');
persoon instanceof Persoon;
true

persoon instanceof Object;
true

`this`

Merk op dat je geen ronde haakjes na de naam van de functie zet. Dit doe je omdat je de functie niet aanroept maar er gewoon naar verwijst met de naam, net zoals je zou doen met elke andere variabele.

We hebben gezien dat je objecten kan maken met constructor functies en met de new operator. Er is nog een manier om objecten te maken. Je kan een normale functie ook gebruiken om objecten te maken zonder de new operator. Als voorbeeld maken we een eenvoudige functie die objecten aanmaakt:

function maakPersoon(voornaam, familienaam) {
   return {
      voornaam: voornaam,
      familienaam: familienaam
   };
}

De maakPersoon functie gebruiken:

var persoon = maakPersoon('David', 'Flanagan');

persoon.voornaam;

"David"

Je kan constructor functies en return objecten gebruiken die anders zijn dan this. M.a.w. je kan het standaard gedrag van een constructor functie wijzigen.

We beginnen met een normaal constructor scenario:

function Persoon() {
   this.voornaam = 'David';
}

var persoon = new Persoon();
persoon.voornaam;
"David"

Wat gebeurd er in dit scenario?

function persoon2() {
   this.voornaam = 'David';
   return {familienaam: 'Flanagan'};
}

var persoon2 = new persoon2();
typeof persoon2.voornaam;
"undefined"

persoon2.familienaam;
"Flanagan"

Je zou verwachten dat de eigenschap voornaam is aangemaakt. Maar dat is niet geval. De eigenschap wordt wel degelijk gedefinieerd in de constructor functie maar wordt niet geïmplementeerd. De eigenschap bestaat in het geheel niet. Die lijn code heeft niets geproduceerd. Hoe komt dat?

Normaal gezien retourneert een constructor-functie bij manier van spreken this. En dat zou this de eigenschap voornaam bevatten. Maar de constructor functie hierboven retourneert zelf een object met de eigenschap familienaam. M.a.w. als een constructor-functie zelf een object retourneert overschrijft die this en alles wat er in zit. Dat gebeurt enkel alleen als de retourwaarde van een constructor-functie een object is. Als de retourwaarde iets anders is dan een object zal de onstructor gewoon this retourneren.

2016-09-26 12:42:10