Prototype: Standaard eigenschappen en methoden

Info 
Door: Mirax Moeilijkheidsgraad: 3/3
Geplaatst op: 16-08-2004Reacties: 3(Bekijken)
Views: 7772 (gem. 3.5120 per week) Log in om zelf te reageren
 Waardering:9.3/10 (3 stemmen)

Door middel van prototype kan je niet alleen aan één speciale variabele een bepaalde property of method toekennen, maar aan alle variabelen van hetzelfde type (bijvoorbeeld strings, arrays). Dit is de benodigde voorkennis voor de tutorial.

De basis
Het toekennen van een standaardfunctie gaat eigenlijk heel makkelijk. In plaats van bijvoorbeeld:

#Code
1
een_eigen_object.methodnaam = methodnaam;

En:
#Code
1
een_eigen_object.eigenschap = eigenschap;


Kun je het ook op elke string of array toepassen:
#Code
1
2
String.prototype.methodnaam = method;
Array.prototype.methodnaam2; = method2;

Het enige verschil is dus het tussenvoegsel prototype.

Opmerking: Ook bij je eigen object, zoals rechthoek in de bovengenoemde tutorial, kun je prototype gebruiken. Alhoewel dat eigenlijk dubbelop is.

Een aantal voorbeelden
Eerst een property toekennen aan een string. Eigenlijk is dit nog niet echt functioneel. Het illustreert wel duidelijk hoe het gebruikt wordt.
#Code
1
2
3
4
String.prototype.iets = 'Hoi';
mijn_string = new String();
mijn_string = 'Hallo';
document.write(mijn_string + '<br>' + mijn_string.iets);

Door dit scriptje wordt aan iedere String (let op de hoofdletter) de waarde 'Hoi' aan de eigenschap .iets toegevoegd.

Methods toekennen aan iets is eigenlijk veel leuker. Wellicht ken je de breezertaal, waar de hoofd- en kleine letters elkaar afwisselen. (ZoAlS DiT DuS). Leuk toch als je dit kan bereiken door voor een string alleen stringnaam.breezer() in te typen? Dat kan zeer eenvoudig. Men neme een functie:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
function breezer(){
    returnstring = '';
    for(i=0;i<=this.length;i++){
        if(    i%2 == 0 ){
            returnstring+= this.charAt(i).toUpperCase();
        }
        else {
            returnstring += this.charAt(i).toLowerCase();
        }
    }    
    return returnstring;
}

En men kent deze functie toe als prototype van een String
#Code
1
String.prototype.breezer = breezer;

Vervolgens geeft de breezer()-method die je hier gecreëerd hebt de waarde terug met afwisselend hoofd- en kleine letters.

Ook op arrays kan je zoiets toepassen. Het leek me wel leuk om een method aan een array toe te kennen die automatisch een random item van uit deze array pikt. Ook dat is niet al te moeilijk:
#Code
1
2
3
4
5
function randomitem(){
    var rand = Math.floor(Math.random()*this.length);
    return this[rand];
}
Array.prototype.randomitem = randomitem;
arraynaam.randomitem() geeft op deze manier een willekeurig item uit de array terug.

Tot slot
Zoals je al uit deze relatief eenvoudige voorbeeldjes kan opmaken, kan je een heleboel met prototype. Behalve op String en Array, kun je prototype ook toepassen op een Boolean, een Function, een Date, een Number, een RegExp. Veel plezier ermee.

3 reacties
westworld Geplaatst op 29-01-2009 om 09:11
 

Regular
Mooie tutorial. Ik dacht eerst dat het over Prototype framework ging ^_^
bass Geplaatst op 17-12-2006 om 16:20
Avatar van bass

Regular
COOL
!
thijs de jong Geplaatst op 14-12-2006 om 17:10
 

Regular
echt niet moeilijk |-|0!

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be