Am văzut până acum că obiectele au proprietăți care pot fi accesate și modificate. De asemenea, am văzut că există funcții speciale numite constructori care sunt folosite pentru crearea obiectelor și că acești constructori pot și ei modifica proprietățile obiectelor.
Pe lângă proprietăți, obiectele au și un așa numit comportament. La fel ca obiectele reale, ele pot face ceva sau li se poate face ceva. Comportamentul obiectelor este definit cu ajutorul unor funcții ale obiectelor. Aceste funcții pot și ele accesa și/sau modifica proprietățile obiectului.
Pentru acest episod vom folosi un obiect care poate fi folosit pentru a păstra scorul unui meci de fotbal. Avem nevoie de două propeietăți care se reprezinte numărul golurilor marcate de cele două echipe: vom numi prima echipă gazde și a doua oaspeti și vom folosi proprietăți cu același nume pentru a păstra golurile. Pentru obiectul ar putea arăta astfel:
1 2 3 4 |
var scor = { gazde: 0, oaspeti: 0 } |
Putem crea și constructori: unul care creează un obiect pentru începutul partidelor (scorul va fi 0 - 0) și unul care creează un obiect cu un scorul pe care îl dorim (specificăm numărul golurilor marcate de cele două echipe).
Pentru a afișa scorul, am putea scrie o funcție de genul:
1 2 3 |
function afiseazaScor(scor) { alert(scor.gazde + " - " + scor.oaspeti) } |
Avem o funcție care primește ca parametru un obiect și folosește proprietățile acestuia pentru a scrie scorul. Dar, poate am dori ca scorul să se afișeze singur... Am vrea doar să-i spunem că dorim afișarea. Putem să adăugăm o funcție în interiorul obiectului care se ocupă de afișare. Seamănă foarte mult cu o proprietate și folosește acel this pe care l-am întâlnit și la constructori; va fi separată de celelalte proprietăți tot prin virgulă.
1 2 3 |
afiseaza: function() { alert(this.gazde + " - " + this.oaspeti) } |
Această funcție realizează o simplă operație și nu returnează nimic. Putem avea funcții care furnizează informații; de exemplu, am putea dori să știm care este diferența dintre cele două echipe. O funcție care realizează acest lucru ar fi:
1 2 3 |
diferenta: function() { return this.gazde - this.oaspeti } |
O valoare pozitivă va indica faptul că echipa gazdă este în avantaj, una negativă va arăta faptul că oaspeții sunt în avantaj, iar valoarea zero va indica egalitate.
Cele două funcții prezentate până acum nu modifică proprietățile obiectului (spunem că nu se modifică starea acestuia). Dar, s-ar putea să avem nevoie și de modificări. De exemplu, am putea dori să avem o funcție pe care să o apelăm când echipa gazdă marchează un gol și aceasta să afișeze un mesaj și să mărească numărul golurilor echipei gazde.
1 2 3 4 |
golGazde: function() { alert("Gol GAZDE") this.gazde++ } |
Similar, putem avea o funcție pentru un gol marcat de oaspeți:
1 2 3 4 |
golOaspeti: function() { alert("Gol OASPETI") this.oaspeti++ } |
Putem avea și funcții puțin mai complicate. Să presupunem că avem nevoie de una care este apelată când se marchează un gol și echipa marcatoare este indicată cu ajutorul unei valori booleene (care va fi true dacă golul este marcat de gazde și false în caz contrar). Dacă dorim, această funcție poate folosi funcțiile deja scrise:
1 2 3 4 5 6 7 |
gol: function(gazde) { if (gazde) { this.golGazde() } else { this.golOaspeti() } } |
Putem avea și funcții care modifică mai multe proprietăți. De exemplu, am putea dori să resetăm scorul (pentru a începe o nouă partidă); valorile celor două proprietăți ar putea deveni 0.
1 2 3 4 |
reseteaza: function() { this.gazde = 0 this.oaspeti = 0 } |
Și acum, să folosim obiectul și funcțiile sale:
1 2 3 4 5 6 7 8 |
scor.afiseaza() scor.golGazde() scor.golOaspeti() scor.golOaspeti() scor.gol(true) scor.afiseaza() scor.reseteaza() scor.afiseaza() |
Vedem că am apelat deja funcțiile unui obiect. Nu e nicio surpriză aici: avem numele obiectului urmat de semnul . și apoi de apelul funcției (care poate conține argumente).
Secvența întreagă ar fi următoarea:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
var scor = { gazde: 0, oaspeti: 0, afiseaza: function() { alert(this.gazde + " - " + this.oaspeti) }, diferenta: function() { return this.gazde - this.oaspeti }, golGazde: function() { alert("Gol GAZDE") this.gazde++ }, golOaspeti: function() { alert("Gol OASPETI") this.oaspeti++ }, gol: function(gazde) { if (gazde) { this.golGazde() } else { this.golOaspeti() } }, reseteaza: function() { this.gazde = 0 this.oaspeti = 0 } } scor.afiseaza() scor.golGazde() scor.golOaspeti() scor.golOaspeti() scor.gol(true) scor.afiseaza() scor.reseteaza() scor.afiseaza() |