Eigen objecten

Objecten zijn handig om informatie te organiseren.

We gaan dit aantonen met een voorbeeld: een persoon is een object. De eigenschappen van een persoon zijn de naam, lengte, gewicht, leeftijd, huidskleur, oogkleur, enz. Iedereen heeft deze eigenschappen, maar de waarden van deze eigenschappen zullen voor verschillende personen verschillen. De methoden van een persoon zijn bijvoorbeeld eten(), slapen(), werken(), spelen(), enz.

Eigenschappen (properties)

Syntaxis:

objectNaam.eigenschapNaam

Je kunt een eigenschap aan een object toevoegen door er een waarde aan te geven:

vader.naam = "John";

Je kunt een eigenschap van een object gebruiken:

alert(vader.naam);

Daarbij is de naam van het object vader en de gebruikte eigenschap naam.

Methoden (methods)

Syntaxis:

objectNaam.methodeNaam();

Argumenten kan je tussen de haken plaatsen.

vader.slapen();

Daarbij is de naam van het object vader en de uitgevoerde methode slapen().

Een object aanmaken

Een object direct aanmaken

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Objecten</title>
</head>
<body>
  <p id="weergeven"></p>
  <script type="text/javascript">
    var vader = {voornaam:"John", naam:"De Bakker", leeftijd:50, oogkleur:"blauw"};
    document.getElementById('weergeven').innerHTML = vader.voornaam + " " + vader.naam + " is " + vader.leeftijd + " jaar jong.";
  </script>
</body>
</html>

Een object indirect aanmaken met een functie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Objecten</title>
</head>
<body>
  <p id="weergeven"></p>
  <script type="text/javascript">
    function persoon(voornaam, naam, leeftijd, oogkleur){
      this.voornaam = voornaam;
      this.naam = naam;
      this.leeftijd = leeftijd;
      this.oogkleur = oogkleur;
    }
    var vader = new persoon("John", "De Bakker", 50, "blauw");
    document.getElementById('weergeven').innerHTML = vader.voornaam + " " + vader.naam + " is " + vader.leeftijd + " jaar jong.";
  </script>
</body>
</html>

De functie gebruikt this.eigenschapNaam om waarden aan eigenschappen toe te kennen. We gebruiken this omdat bij het definiëren van de functie de objectnaam nog niet gekend is. Bij het uitvoeren van de functie wordt this vervangen door de opgegeven objectnaam.

Een functie om een object aan te maken noemen we een constructor, die je kunt gebruiken om met de opdracht new nieuwe objecten aan te maken:

var moeder = new persoon("Sandrine", "Ramout", 48, "groen");

Op dezelfde manier kun je methoden aan een object toevoegen:

function persoon(voornaam, naam, leeftijd, oogkleur){
  this.voornaam = voornaam;
  this.naam = naam;
  this.leeftijd = leeftijd;
  this.oogkleur = oogkleur;
  this.familienaamInvoeren = function(familienaam){
    this.familienaam = familienaam;
  };
}

Merk op dat methoden (functies binnen een object) in het object worden gedefinieerd.

De methode familienaamInvoeren() definieert de familienaam van een persoon en kent deze aan de persoon toe. Door het gebruik van this kunnen we later meegeven over welke persoon het gaat. Om het persoon object moeder een familienaam toe te wijzen, gebruik je:

moeder.familienaamInvoeren("De Bakker");

Weergeven