Tempo fa Davide mi ha fatto notare che molti miei articoli sulla programmazione orientata agli oggetti erano interessanti ma piuttosto ostici per chi non mastica pane e programmazione. In questo articolo vorrei affrontare nuovamente l'argomento dal punto di vista di chi usa jQuery ma non è molto addentro alle problematiche relative agli oggetti.
Oggetti: cosa sono?
Quando descriviamo un oggetto reale parliamo del suo colore, della sua forma, del suo peso e così via, ossia parliamo delle sue proprietà. Le proprietà non sono altro che dei tratti distintivi dell'oggetto. Queste proprietà possono avere dei valori, ad esempio:
Scatola: colore = blu forma = rettangolare peso = 5Kg
Una scatola è un oggetto, e come potete vedere ha proprietà e valori. Gli oggetti JavaScript sono la stessa cosa: una collezione di coppie di proprietà e valori.
Tuttavia gli oggetti sarebbero alquanto inutili se contenessero solo dati. In fondo, penserete, ci sono già gli array per questo. Invece gli oggetti possono anche compiere delle azioni su questi dati, ossia sulle loro proprietà. Queste azioni si chiamano metodi, e sono le tradizionali funzioni JavaScript che già conoscete:
Scatola:
colore = blu
forma = rettangolare
peso = 5Kg
mostraPeso = funzione() {
alert('Il peso è di ' + peso);
}
Come si scrivono gli oggetti in JavaScript
Fino ad ora abbiamo usato una pseudo-rappresentazione degli oggetti. Vediamo ora come vengono effettivamente scritti in JavaScript.
Oggetti letterali
Questi oggetti li avrete sicuramente usati nelle opzioni dei plugin jQuery. Hanno questa struttura:
var Oggetto = {
proprieta: valore,
proprieta2: valore,
//...
proprietaN: valore
};
Ciascuna coppia proprietà/valore ha come separatore una virgola, tranne l'ultima. Le proprietà vengono separate dai loro valori tramite i due punti. Vediamo la rappresentazione del nostro oggetto Scatola:
var Scatola = {
colore: 'blu',
forma: 'rettangolare',
peso: '5Kg',
mostraPeso: function() {
alert(this.peso);
}
};
Non preoccupatevi per ora della parola chiave this. Concentriamoci invece su come i dati vengono scritti. Noterete infatti che i primi tre valori sono delle stringhe e quindi vanno racchiusi tra virgolette. Negli oggetti letterali infatti bisogna osservare strettamente le regole sui tipi di dati in JavaScript. Quindi i numeri, i riferimenti ad altri oggetti, i booleani, le espressioni regolari, null, undefined e gli array non hanno bisogno delle virgolette, ma le stringhe si.
Oggetti con costruttori
Per capire questi oggetti pensiamo a come viene realizzata una scatola. Prima si fa uno stampo della scatola e poi si crea fisicamente la scatola in base a quello stampo. In altre parole, prima si crea il modello e poi l'oggetto concreto.
Ecco come viene creato il modello con questi oggetti (lo stampo della scatola):
function Scatola(colore, forma, peso) {
this.colore = colore;
this.forma = forma;
this.peso = peso;
}
La funzione Scatola accetta come suoi parametri i tre valori che andranno a definire le sue proprietà, ossia colore, forma e peso. Il nostro stampo quindi ci dice che l'oggetto che andremo a creare dovrà avere queste proprietà e come valori i valori passati alla funzione.
Ma come ci crea la scatola reale? Tramite l'operatore new posto davanti a Scatola:
var scatola = new Scatola('blu', 'rettangolare', '5Kg');
Il nostro oggetto finale, la nostra scatola stampata, è ora tutto in scatola, che contiene tutte le sue proprietà e i suoi valori.
Riassumendo: gli oggetti letterali creano in un unico passaggio il nostro oggetto finito, mentre gli oggetti con costruttori creano prima un modello dell'oggetto e poi l'oggetto finito.
Cos'è this?
Avrete capito che this è una parola chiave JavaScript. Nell'àmbito degli oggetti, this è un riferimento all'oggetto corrente. In altre parole, nel nostro caso è un alias di Scatola. Quindi nell'esempio degli oggetti con costruttore avremmo potuto anche scrivere:
function Scatola(colore, forma, peso) {
Scatola.colore = colore;
Scatola.forma = forma;
Scatola.peso = peso;
}
E nell'esempio dell'oggetto letterale:
var Scatola = {
colore: 'blu',
forma: 'rettangolare',
peso: '5Kg',
mostraPeso: function() {
alert(Scatola.peso);
}
};
Attenzione a quando si usa questa parola chiave con jQuery. Bisogna sempre chiedersi: this si riferisce all'oggetto che penso? Non sempre. Infatti jQuery crea a sua volta degli oggetti e se usiamo questa parola chiave all'interno dei suoi oggetti o metodi quest'ultima farà riferimento a jQuery e non all'oggetto che vogliamo.
Esempio:
var Animator = {
element: '#test',
fade: function() {
$(this.element).fadeOut('slow');
}
};
Qui this si trova all'interno di $() ossia dell'oggetto jQuery e quindi fa riferimento a jQuery e non ad Animator! Il risultato restituirà undefined (un errore), perchè element non esiste come proprietà di jQuery.
Accedere alle proprietà di un oggetto
Si può accedere alle proprietà di un oggetto in due modi:
- con la notazione puntata (
oggetto.proprieta) - con la notazione a parentesi quadre (
oggetto['proprieta'])
Esempi:
alert(Scatola.peso); // '5Kg'
alert(Scatola['peso']); // '5Kg'
Nel caso degli oggetti con costruttori bisogna prima usare l'operatore new:
var scatola = new Scatola('blu', 'rettangolare', '5Kg');
alert(scatola.peso); // '5Kg'
alert(scatola['peso']); // '5Kg'
Se la proprietà è una funzione, ossia un metodo dell'oggetto, occorre usare anche le doppie parentesi tonde, come in qualsiasi altra invocazione di funzione:
Scatola.mostraPeso(); // '5Kg'
Scatola['mostraPeso'](); // '5Kg'