login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > Javascript

Gegevens:
Geschreven door:
 Stijn
Moeilijkheidsgraad:
 Moeilijk
Hits:
 6526
Punten:
Aantal punten:
  
Aantal stemmen:
 0
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (0)
 

Tutorial:

Overerving in Javascript

Overerving in Javascript
Menu: 1. Voorwoord
2. Inleiding
3. De klasse Bedrijf
4. De klasse Leverancier (extends Persoon)
5. Een eerste test
6. Tot slot

1. Voorwoord

Deze tutorial is bedoeld voor mensen die kennis hebben van OOP en inzicht hebben in geavanceerde Javascript technieken.

In het eerste deel vroeg ik mij op het einde af hoe je over kon erven van klasses. Na het bekijken van meer IBM code, zag ik dat ze ook overerving gebruiken in sommige delen. Dus na een beetje bekijken en proberen heb ik door hoe je overerving moet gebruiken.


2. Inleiding

In deze tutorial gaan we verder op het adresboek van de vorige twee delen. Er komen twee klasses bij:

  • Leverancier: een uitbreiding op Persoon
  • Bedrijf: een klasse dat de naam en adres van een bedrijf bevat

3. De klasse Bedrijf

adresboek.Bedrijf = (function() {

    function Bedrijf(naam, adres)
    {
        this.naam = naam;
        this.adres = adres;
    }
   
    Bedrijf.prototype = {
        toString : function() {
            return this.naam + " "
                    + "Adres bedrijf: " + this.adres.toString();
        }
    };
   
    return Bedrijf;

})();

De Bedrijf klasse leg ik niet meer uit, zie hiervoor deel 1


4. De klasse Leverancier (extends Persoon)

adresboek.Leverancier = (function(parent) {
   
    function Leverancier(naam, telefoon, adres, bedrijf)
    {
        parent.call(this, naam, telefoon, adres);
        this.bedrijf = bedrijf;
    }
   
    //extend gebeurt hier in feitelijk
    Leverancier.prototype = new parent();
   
    //methodes toevoegen aan de Leverancier klasse, zelfs overschrijven
    Leverancier.prototype.toString = function() {
        var str = parent.prototype.toString.call(this);
        return str + " "
                + "Bedrijf: " + this.bedrijf.toString();
    }
   
    return Leverancier;
   
}(adresboek.Persoon));

We maken dus gewoon een klasse zoals anders. In de constructor gaan we eerst de parent constructor oproepen. Dit gebeurt door de lijn parent.call(this, naam, telefoon, adres);. Daarna kan je andere instructies zetten, in ons geval gaan we het bedrijf nog instellen.

Dan komen we aan de lijn onder de constructor. Dat is eigenlijk de overerving. Alle methodes en properties worden aan de klasse Leverancier toegekent.

Zoals je ziet gaan we de functie toString overriden in onze Leverancier klasse. Let ook op de wijze waarop methodes worden toegevoegd aan child klasses. Wat we eerst doen is onze parent toString functie oproepen en daarna voegen we onze eigen code eraan toe. Let erop als je iets oproept van de parent klasse, dat je de call() methode gebruikt.

De parent variabele die je ziet is een manier van werken die ik zelf beetje gezocht heb. Zoals je ziet in de laatste regels staat er adresboek.Persoon, dit is dan de klasse waarvan we gaan overerven. In de code maken we dan gebruik van die parent variabele om de methodes enzo over te erven en om parent methodes op te roepen.

Zoals je ziet is het niet zo moeilijk en dankzij prototype is overerving mogelijk.


5. Een derde test

<script language="javascript" type="text/javascript" src="adresboek.js"></script>

<script language="javascript" type="text/javascript">
    var adressen = new adresboek.Adresboek();
   
    var adres = new adresboek.Adres("St-Elooisplein", "36/44", "8800", "Roeselare");
    var mezelf = new adresboek.Persoon("stijn", "0479/51.35.47", adres);
    var zus = new adresboek.Persoon("tine", "geen", adres);
   
    //onze overerving testen
    var ibmAdres = new adresboek.Adres("Bourgetlaan", "42", "1130", "Brussel");
    var ibm = new adresboek.Bedrijf("IBM", ibmAdres);
    var ibmLeverancier = new adresboek.Leverancier("Yves van Seters", "+32-2-339 4397", "Gebouw C", ibm);
   
    adressen.toevoegen(mezelf);
    adressen.toevoegen(zus);
    adressen.toevoegen(ibmLeverancier);
   
    alert(adressen);
    alert("Aantal: " + adressen.count);
   
    //iterator test code
    var it = adressen.getIterator();
   
    while(it.hasNext()) {
        alert(it.next());
    }
</script>

De code spreekt voor zich. Hij zal de personen van de adressen in een alert gooien en ze ook nog eens één voor één overlopen.


6. Tot slot

Zo de overervings vraagtekens zijn ook weer opgelost. Een beetje oefening kan geen kwaad nu vermoed ik. Probeer zelf eens iets kleins in elkaar te plaatsen en plaats je werkje in de reacties (zal het met plezier bekijken).

De volgende topics over OOP in Javascript zullen waarschijnlijk gaan over static properties en functies, en ook hoe je "abstracte" klasses kan maken.

Plaats gerust een reactie, vraag of extra uitleg in de reacties.

De broncode van de tutorial:

Extra lectuur over namespaces

« Vorige tutorial : WYSIWYG-editor

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.018s