Jan
22

Objecten, properties en prototypes in Javascript

admin JavaScript Tutorial 2010-01-22

1. Inleiding

In javascript is het mogelijk je eigen objecten te maken.
Deze objecten kunnen data en methodes bevatten.
Deze data (die in ‘lid-variabelen’ steekt) en deze methodes (ook wel functies genaamd) noemt men de ‘properties’ van het object.
Een object is een soort blauwdruk waarin, als je het goed doet, duidelijk word beschreven ‘wat het doet’.
Dit klinkt op het begin nogal ingewikkeld maar eigenlijk valt het goed mee.

2. Properties van een object

De properties, waar ik het daarnet over had, kunnen worden aangeroepen op een heel simpele manier.

naam_van_het_object.naam_van_de_property

Maar voor dat je ze kan aanroepen moet je ze eerst ‘aan maken’.
Hier zijn 2 manieren voor:
1) een object-initializer gebruiken.
2) een constructor maken.

3. Object aanmaken: object-initializer

Als je maar 1 object van 1 soort wil maken is de object-initializer erg handig, voor meerdere objecten is het handig om de constructor-methode te gebruiken.

De objet-initializer werkt als volgt:

naam_van_het_object = {property1 : waarde1, property2 : waarde2, ...}
// je kan ook een object binnen een object aanmaken:
object1 = {property1 : waarde1, object2 : {property2.1 : waarde2.1, property2.2 : waarde2.2,...},...}

Dit ziet er allemaal ingewikkeld uit, maar ik ga even een klein voorbeeldje geven waardoor dit allemaal wat duidelijker word.

nemesiskoen = {naam : 'koen', leeftijd : '17', haar : {kleur : 'bruin', lengte : 'lang', gewassen : true}}
alert(nemesiskoen.naam);
alert(nemesiskoen.haar.kleur);
// output : 'koen', 'bruin'

// je kan heel gemakelijk nieuwe property's toevoegen:
nemesiskoen.heeft_computer = true;
nemesiskoen.computer = {geheugen : '...', videokaart : '...', ...};
// enz

Nu zie je waarschijnlijk hoe handig objecten kunnen zijn.
Toch, als je bv. voor elk personage een nieuw object moet gaan aanmaken en telkens zeggen welke property’s er zijn en dan pas de waarde in stellen, dan ga je veel tijd verliezen.
Hier is een handige oplossing voor, namelijk via de constructor methode.

4. Object aanmaken: constructor

Je maakt een functie aan, die als constructor dient en hierin initializeer je alle property’s.

function mens(naam, leeftijd) {
this.naam = naam;
this.leeftijd = leeftijd;
}

nemesiskoen = new mens('koen', 17);
vintage = new mens('ralph', 36);
murfy = new mens('maarten', 16);

alert(murfy.naam);
alert(nemesiskoen.leeftijd);
alert(vintage.naam);

Stel we willen murfy een nieuwe property geven, namelijk de ‘heeft_computer’ property.
Dan kunnen we simpel de syntax gebruiken die we hierboven ook hebben gebruikt.

function mens(naam, leeftijd) {
this.naam = naam;
this.leeftijd = leeftijd;
}

murfy = new mens('maarten', 16);

murfy.heeftComputer = true;

if(murfy.heeftComputer)
alert(murfy.naam + ' heef een computer');
else
alert(murfy.naam + ' heeft geen computer');

Nu is er nog een leuk mogelijkheid bij objecten, en dit is namelijk objecten binnen objecten.
Hetgeen ik daarnet al heb aangetoond met de ‘computer’ binnen het object ‘nemesiskoen’.
Dit gaat ook via een constructor.

function auto(merk, bouwjaar) {
this.merk = merk;
this.bouwjaar = bouwjaar;
}
function mens(naam, leeftijd, auto) {
this.naam = naam;
this.leeftijd = leeftijd;
this.auto = auto;
}

z3 = new auto('BMW', 1998);
murfy = new mens('maarten', 16, z3);

alert(murfy.auto.merk);

Ik hoop dat je nu begint te zien hoe fijn het werken met objecten binnen javascript is.
Nu kunnen we alles nog een stapje verder zetten en methodes (functies) aan het object gaan toevoegen.

function getNaam() {
alert(this.naam);
}
function getLeeftijd(leeftijd) {
alert(this.leeftijd);
}
function mens(naam, leeftijd) {
this.naam = naam;
this.leeftijd = leeftijd;
this.getNaam = getNaam;
this.getLeeftijd = getLeeftijd;
}
fangorn = new mens('thomas', 26);
fangorn.getLeeftijd();
5. HTML objecten aanmaken

Zoals je misschien wel weet kent HTML ook objecten.
Deze hebben ook properties, attributen genaamd.
Een voorbeeld.

<input type="text" name="foo" value="bar" />

Hier zie je het object input met de properties ‘type’, ‘name’ en ‘value’.
In het echt heeft input er nog meer (id, class, …) maar we zullen ons beperken tot deze 3.
Nu kan je het maken van deze ‘velden’ automatiseren via javascript.
Namelijk door zelf een object input aan te maken en deze waardes in te stellen.
We beginnen met de constructor.

function input(type, name, value) {
this.type = type;
this.name = name;
this.value = value;
}

Hiermee kunnen we de volgende objecten mee aanmaken.

pass = new input('password', 'pass', '***');

naam = new input('text', 'naam', '');

Nu hebben we een input van het type ‘password’ en van het type ‘text’.
Maar eigenlijk hebben we hier niets aan, omdat er niets op het scherm komt.
Dat kunnen we oplossen door een functie hier aan vast te maken.
Namelijk ‘printinput()’.

function printinput() {
document.write('<input type="'+ this.type +'" name = "'+ this.name +'" value = "'+ this.value +'">');
}

En om af te sluiten moeten we dit koppelen aan het object, en de functie aanroepen.

function printinput() {
document.write('<input type="'+ this.type +'" name = "'+ this.name +'" value = "'+ this.value +'">');
}

function input(type, name, value) {
this.type = type;
this.name = name;
this.value = value;
this.printinput = printinput;
}

pass = new input('password', 'pass', '***');

naam = new input('text', 'naam', '');

pass.printinput();
naam.printinput();

Nu zouden we kunnen automatiseren door het printen automatisch te laten verlopen.
We laten printen binnen de constructor.

function input(type, name, value) {
this.type = type;
this.name = name;
this.value = value;
document.write('<input type="'+ this.type +'" name = "'+ this.name +'" value = "'+ this.value +'">');
}

pass = new input('password', 'pass', '***');

naam = new input('text', 'naam', '');

En zo kan je nog op honderden andere manieren automatiseren.

6. Prototypes

Buiten het aanmaken en manipuleren van objecten is het ook mogelijk deze te extenden.
Dit betekend dat je de constructor van het object alle eigenschappen van de constructor van een ander object laat ‘overerven’ zodat het deze ook heeft.
Zo kun je onderscheid maken tussen verschillende ‘groepen’ binnen 1 object.
Bv. voertuig.
Dit kan opgesplitst worden in vliegtuigen, rijtuigen en vaartuigen. Deze kunnen op hun beert weer opgesplitst worden, en zo kan je blijven doorgaan.
Hierdoor maak je een soort van hiërarchie.
In javascript word een object waaruit een ander object word afgeleid een ‘prototype’ genoemd.
Een soort van 1e versie die nog kan ‘verbeterd’ en ‘uitgebreid’ worden.
Om te beginnen ga ik eerst laten zien hoe je zo’n prototype aanmaakt en een ander object hieruit afleid.

function voertuig() {
this.beweegt = false; // het staat stil
this.soort = "geen soort"; // kan nog worden ingevuld
}

function rijtuig() {
this.heeft_wielen = true;
}

rijtuig.prototype = new voertuig;

auto = new rijtuig;

if(auto.beweegt)
alert('Vroem!');
else
alert('auto staat stil');

// we gaan de auto laten bewegen

auto.beweegt = true;

if(auto.beweegt)
alert('Vroem!');
else
alert('auto staat stil');

Nu kan je een klein trukje uithalen met auto, namelijk deze meegeven als argument met een functie speciaal hiervoor ontworpen.
Dit toon ik in onderstaand voorbeeld.

function print_beweging(wat, tekst) {
if(wat.beweegt)
alert(tekst);
else
alert(wat.soort +' beweegt niet');
}

auto = new rijtuig;
auto.soort = 'auto';

print_beweging(auto, 'Vroem!');

Nu is dit maar een kleinigheidje vergeleken met wat je allemaal kan doen met ‘extenden’.
Onderstaand voorbeeld laat zien hoe je een ‘property’ kunt toevoegen aan een ‘prototype’ van een bepaalde ‘constructor’.
Bovenstaande zin klinkt misschien moeilijk, maar dit wil hetzelfde zeggen als: we geven het object rijtuig een nieuwe property via auto.

rijtuig.prototype.heeft_wielen = false; // standaard waarde is false
auto.heeft_wielen = true; // een auto heeft wielen;)

boot = new voertuig;
boot.soort = "boot";

if(boot.heeft_wielen)
alert('Vroem met de boot?');
else
alert('Boot heeft geen wielen');

Een andere handigheid is dat je ‘flexibele’ constructors kan maken.
Zodat je kan kiezen of je een argument meegeeft of niet.
Je kan dus kiezen of je een naam geeft aan het voertuig of niet.

function voertuig(naam, beweegt) {
this.naam = naam || "geen naam";
this.beweegt = beweegt || false;
}

boot1 = new voertuig('Speedboot');
boot2 = new voertuig;

boot2.beweegt = true;

/*
boot1 ziet er zo uit:
boot1.naam == 'Speedboot'
boot1.beweegt == false

boot2 ziet er zo uit:
boot2.naam == 'geen naam';
boot2.beweegt == true
*/

En het in beweging zetten kunnen we natuurlijk ook automatiseren.

function beweeg() {
this.beweegt = true;
}

function stop() {
this.beweegt = false;
}

function printBeweeg() {
if(this.beweegt)
alert('Beweging!');
else
alert('Staat stil!');
}

function voertuig(naam, beweegt) {
this.naam = naam || "geen naam";
this.beweegt = beweegt || false;
this.beweeg = beweeg;
this.stop = stop;
this.printBeweeg = printBeweeg;
}

boot = new voertuig('Speedboot', true);
boot.printBeweeg();
boot.stop();
boot.printBeweeg();
boot.beweeg();
boot.printBeweeg();

Zoals je kan zien heb ik drie methodes aan de constructor gekoppeld: stop, beweeg en printBeweeg.
De eerste laat het voertuig stoppen, de tweede zet het in gang en de derde laat op het scherm weergeven ‘wat’ er gebeurt (bewegen of stil staan).
Nu kunnen we dit allemaal nog een stapje verderzetten en de ‘richting’ dat het voertuig beweegt aangeven, de snelheid en nog veel veel meer.
Beide eigenschappen horen bij voertuig, hoewel bij het printen je de methode beter los kan koppelen van elkaar.
De snelheid van de boot is immers in knopen en die van auto in km/h.
Hier een laatste voorbeeld om te laten zien hoe ver je dit kan trekken.

/*
DE HOOFDCONSTRUCTOR EN ZIJN METHODES
*/

function printBeweeg(special) {
if(this.beweegt)
alert(special || 'Beweging!');
else
alert('Staat stil!');
}

function setSnelheid(hoeveel) {
if(hoeveel > 0) {
this.beweegt = true;
this.snelheid = hoeveel;
} else {
this.beweegt = false;
this.snelheid = false;
}
}

function voertuig() {
this.stop = stop;
this.printBeweeg = printBeweeg;
this.setSnelheid = setSnelheid;
// richting
// setrichting
// ...
// zo zijn er nog zoveel voorbeelden
}

/*
DE SUBCONSTRUCTORS EN HUN METHODES
*/

function printRijSnelheid() {
if(this.beweegt && this.snelheid != 0)
alert(this.naam +" beweegt met een snelheid van "+ this.snelheid + " km/h");
else
alert(this.naam +" beweegt niet");
}
function printVaarSnelheid() {
if(this.beweegt && this.snelheid != 0)
alert(this.naam +" beweegt met een snelheid van "+ this.snelheid + " knopen");
else
alert(this.naam +" beweegt niet");
}

function rijtuig() {
this.heeft_wielen = true;
this.snelheid = 0; // km/h
this.printrRijSnelheid = printRijSnelheid;
}

function vaartuig() {
this.snelheid = 0; // knopen
this.printVaarSnelheid = printVaarSnelheid;
}

rijtuig.prototype = new voertuig;
vaartuig.prototype = new voertuig;

boot = new vaartuig;
auto = new voertuig;

boot.naam = 'De speedboot';
auto.naam = 'De porche';

boot.setSnelheid(10);
boot.printBeweeg(); // output: Beweging!
boot.printVaarSnelheid(); // output: De speedboot beweegt met een snelheid van 10 knopen

auto.setSnelheid(100);
auto.printBeweeg('Vroem!'); // output: Vroem!
auto.setSnelheid(0); // motor afzetten;)
auto.printBeweeg('Vroem!'); // output: Staat stil

Ik hoop dat deze tutorial je wat heeft bijgebracht over de objecten en het manipuleren van objecten binnen javascript.
Ik vind dit alleszins een heel interessant onderwerp.

, ,
Address: http://www.programmeer-tutorials.com/2010/01/objecten-properties-en-prototypes-in-javascript/
«
»
Trackback

no comment untill now

Add your comment now