Argomenti trattati: assegnare metodi e proprietà ad un oggetto creato dal programmatore usando una funzione costruttrice.
In JavaScript è possibile definire degli oggetti personalizzati.
Il primo passo è quello di costruire un modello logico dell'oggetto, ovvero un modello dell'elemento che vogliamo costruire, che specifichi:
Prendiamo ad esempio il modello logico del cane.
Ogni cane ha varie caratteristiche, che variano secondo la razza. Quindi, un' evidente proprietà del cane sarà la razza. Un'altra caratteristica che varia è la taglia, il sesso o l'età.
Gli oggetti si basano su funzioni costruttrici, che segnalano al browser che stiamo costruendo un nuovo oggetto con delle caratteristiche da noi stabilite.
Per sottolineare che l'attributo in una funzione costruttrice oppure in un metodo appartiene all'istanza di un oggetto si usa l'attributo this.
Per richiamare una funzione costruttrice ed istanziare un oggetto si utilizza la parola riservata new.
Sempre prendendo ad esempio il cane, che definiamo come modello per tutti i cani, il cane Snoopy è un bracchetto di taglia piccola, di sesso maschile, che può essere definito come istanza della classe cane.
Oppure la mela è un frutto con determinate caratteristiche, ad esempio può avere un colore verde o rosso.
Per richiamare le proprietà si usa la sintassi:
oggetto.proprietà;
per richiamare i metodi:
oggetto.metodo();
Il codice utilizzato per definire una funzione costruttrice, riferito alla classe frutto è il seguente:
|
function frutto(nome_frutto, forma_frutto, colore_frutto) { //Il nostro modello di frutto ( function frutto() ) che genererà l'istanza di una specifica mela (this) this.nome=nome_frutto; this.forma=forma_frutto; this.colore=colore_frutto; //fin qui, richiamiamo le proprietà che vogliamo attribuire al frutto this.visualizza=visualizza; // attenzione: nel costruttore dobbiamo richiamare soltanto il nome della funzione e non la sua esecuzione, quindi è corretto scrivere visualizza ma non visualizza() //il metodo 'visualizza', che sarà proprio di tutti gli oggetti istanziati //a partire da questa funzione costruttrice } function visualizza(frutto) { // potremmo anche scrivere this.nome, this.forma e this.colore return(frutto.nome + " è " + frutto.forma + " ed è " + frutto.colore) } //Ciò che fa la funzione visualizza() |
In dettaglio, i parametri: "nome_frutto, forma_frutto, colore_frutto", sono i valori delle proprietà "nome", "forma", "colore".
Il metodo visualizza sarà descritto attraverso una funzione che permette di visualizzare i valori delle caratteristiche del frutto originato dal modello, ossia i valori che assumono le proprietà nell'istanza della classe frutto.
!!! Il metodo non è seguito dalle parentesi nella funzione costruttrice. Scrivere ad esempio 'this.visualizza=visualizza()', genera un errore !!!
A questo segue il codice che identifica la variabile mela come oggetto frutto:
| var mela=new frutto("la mela", "tondeggiante", "verde, gialla o rossa"); mela.visualizza(); /*"new" è la parola riservata che riconduce mela alla classe frutto, in cui il valore "la mela" viene passato alla proprietà della classe frutto nome, al posto del parametro nome_frutto, e così via.*/ |
Abbiamo così istanziato un nuovo oggetto frutto, ed abbiamo assegnato i seguenti valori alle seguenti proprietà:
mela.nome="la mela"; mela.forma="tondeggiante";mela.colore="verde, gialla o rossa";
A volte può essere necessario dover aggiungere delle nuove proprietà o dei nuovi metodi ad un oggetto, che potrebbero però essere utili a tutti gli oggetti istanziati attraverso una certa classe.
Per renderlo possibile, si utilizza la proprietà incorporata prototype, che permette di estendere le proprietà di una classe a tutti gli oggetti istanziati dalla classe estesa. Per capire il concetto di estensione delle proprietà, può essere ripreso l'esempio precedente:
|
function frutto(nome, forma, colore) { this.nome=nome; this.forma=forma; this.colore=colore; this.visualizza=visualizza; // attenzione: nel costruttore dobbiamo richiamare soltanto il nome della funzione e non la sua esecuzione, quindi è corretto scrivere visualizza ma non visualizza() } // la funzione costruttrice frutto riprende esattamente la sintassi già vista function frutto_estivo(stagione) { this.stagione=stagione; } //creo una nuova classe var mela=new frutto("la mela", "tondeggiante", "gialla o rossa") mela.visualizza(100,50); // l'oggetto mela è istanziato dalla classe frutto, ancora non estesa. //La mela, pertanto, non ha alcuna proprietà stagione frutto.prototype=new frutto_estivo; function visualizza() { //attraverso la proprietà prototype, estendo le proprietà della classe frutto, //in quanto vi aggiungo la proprietà stagione della classe 'frutto estivo'function visualizza() iif (typeof(this.stagione)=='undefined') res=" - stagione non definita"; else res=this.stagione + " - stagione definita"; miafinestra=window.open("", "", "width=300, height=150") miafinestra.document.write(this.nome + " è " + this.forma + " ed è " + this.colore + "." + this.stagione + ".") } /*La nuova funzione visualizza, è un metodo che fa aprire una finestra dalla variabile 'miafinestra'; dapprima, viene controllato se la proprietà 'this.stagione' restituisce 'undefined'.*/ var anguria=new frutto; /*Nel secondo caso, istanzio un oggetto in cui la proprietà stagione è definita*/ anguria.nome="L\' anguria"; anguria.forma="ovale"; anguria.stagione=" E\' un frutto tipicamente estivo"; anguria.colore="caratterizzata da una polpa rossa e succosa"; anguria.visualizza(); |
Gli esempi citati sono molto semplici, ed il loro scopo è solo quello di dimostrare alcune potenzialità dello sviluppo degli oggetti personalizzati in JavaScript. Vi sono anche dei metodi appositi che consentono di visualizzare con facilità le proprietà degli oggetti. Sarà in realtà molto più utile ricorrere agli oggetti incorporati e al modello ad oggetti sotteso al documento HTML, argomenti trattati in altre sezioni.