Di solito i testi di informatica introducono il concetto di oggetto facendo riferimento ad esempi concreti, presi dalla nostra realtà quotidiana. Per esempio un oggetto viene paragonato a un'automobile, che ha certe proprietà (es. il colore, la cilindrata, il costo etc.) e certi metodi che possono essere eseguiti sull'automobile stessa (es. riempire il serbatoio, lavare la macchina, etc.). Sebbene questi esempi abbiano indubbiamente una validità didattica generale, a mio avviso sono troppo distanti dalla pratica della programmazione per offrire un appiglio concreto a chi si avvicina per la prima volta a questa tecnica di programmazione.
Noi vogliamo invece partire da un esempio semplice ma attinente alla programmazione. Consideriamo un punto sul piano di coordinate X e Y e il calcolo della sua distanza dall'origine:
Esso può essere rappresentato in un programma con due variabili x e y, contenenti le coordinate, e con una funzione distanza() per calcolarne la distanza dall'origine.
Un modo diverso e forse più efficace è quello di "incorporare" tutte le caratteristiche del nostro punto (ovvero le coordinate e la funzione) in un unico oggetto così definito:
x:0, // proprietà 'x' dell'oggetto 'punto'
y:0, // proprietà 'y' dell'oggetto 'punto'
distanza: function() // metodo 'distanza()' dell'oggetto 'punto'
{
var dist;
dist = Math.sqrt(this.x*this.x + this.y*this.y)
return dist;
}
}
Chi ha qualche esperienza con linguaggi di programmazione non ad oggetti, come per esempio il C classico, riconoscerà molte somiglianze fra un oggetto e una struttura. Come la struttura (struct) possiamo definire un oggetto come un tipo aggregato, al cui interno si possono trovare più variabili di tipi diversi (le proprietà) e anche delle funzioni (i metodi).
Nel nostro caso l'oggetto punto contiene due proprietà ('x' e 'y') e un metodo ('distanza'). La sintassi generale per la creazione di un oggetto in JS è (abbastanza) semplice ed è qui riepilogata:
proprietà1 : valore_iniziale, // attenzione ai due punti e alla virgola
proprietà2 : valore iniziale,
metodo: function() // attenzione alle tonde
{ // e alle graffe
}
}
Esistono molti altri modi per dichiarare un oggetto in JS (ne vedremo un altro fra breve), ma questo è forse uno dei più intuitivi.
Come si vede l'oggetto può contenere quante proprietà (cioè valori variabili) si vuole separati da virgola (e ciascuno accompagnato da un valore iniziale) e quanti metodi si vuole (ciascuno con le proprie parentesi tonde e graffe). I valori indicati dopo i due punti sono i valori che le corrispondenti proprietà e metodi assumono all'atto della creazione dell'oggetto.
Si osservi che la parola chiave function è usata in modo un po' diverso da come siamo stati abituati finora. Noi infatti scrivevamo per esempio:
{
return x*x;
}
In questo caso la parola function precede il nome della funzione (quadrato). In realtà esiste un modo alternativo per dichiarare una funzione:
{
return x*x;
}
Si osservi che qui la funzione quadrato viene dichiarata come una variabile, usando invece la parola function in modo diverso dal solito. Le due dichiarazioni sono equivalenti e torneremo più avanti sul loro significato.
Si osservi dall'ultimo esempio come è possibile dichiarare una funzione con un parametro (in questo caso 'x') usando la nuova notazione. Per esempio volendo aggiungere al nostro oggetto un metodo per assegnare un nuovo valore alla x e alla y, potremmo scrivere:
var punto = {
x:0, // proprietà 'x' dell'oggetto 'punto'
y:0, // proprietà 'y' dell'oggetto 'punto'
distanza: function() // metodo
'distanza()' dell'oggetto 'punto'
{
var dist;
dist = Math.sqrt(this.x*this.x + this.y*this.y)
return dist;
}, // attenzione a questa virgola!
assegna: function(A,B)
{
this.x = A;
this.y = B;
}
}
In questo caso il metodo assegna contiene anche due parametri A e B, mediante i quali è possibile passare valori al metodo stesso:
Si noti infine la parola chiave this usata in questo modo:
La parola this serve per accedere alle proprietà interne dello stesso oggetto in cui si trova il metodo (nel nostro caso il metodo distanza). Ricordiamo che avevamo già incontrato in precedenza l'uso di this per fare riferimento all'oggetto corrente. Qui si tratta in sostanza dello stesso scopo: this rappresenta sinteticamente l'oggetto cui appartiene un certo metodo (ovvero l'oggetto proprietario del metodo stesso).
Possiamo schematizzare il nostro oggetto punto come una scatola contenente al proprio interno due variabili x e y (proprietà) e una funzione distanza (metodo):
Vediamo adesso un semplice esempio di come si possa usare l'oggetto appena creato all'interno di un codice JS:
punto.y = document.getElementById("y").value;
document.getElementById("ris").value = punto.distanza();
Con le prime due istruzioni si assegnano alle proprietà punto.x e punto.y i valori letti da due caselle di input. La terza istruzione calcola la distanza del punto dall'origine e la visualizza in un'altra casella di testo.
Si osservi la notazione col punto (dot) usata per accedere alle proprietà e ai metodi di un oggetto:
nome_oggetto.proprietà
nome_oggetto.metodo()
Osserviamo di passaggio che anche l'istruzione document.getElementById("x").value fa evidentemente riferimento alla proprietà value di un oggetto (un oggetto predefinito del JS, di cui parleremo più avanti).
Usando invece il metodo assegna per assegnare i valori delle proprietà dell'oggetto, potremmo scrivere:
num2 = document.getElementById("y").value;
punto.assegna(num1,num2);
document.getElementById("ris").value = punto.distanza();
Questo tipo di notazione può sembrare inutilmente complicato e in effetti, in questo caso elementare, probabilmente è così. In casi più complessi si preferisce spesso però accedere alle proprietà interne di un oggetto non direttamente, ma usando metodi appositi (come il metodo assegna nel nostro esempio qui sopra). Questo consente di proteggere i dati interni all'oggetto da accessi non desiderati o eseguiti in modo non corretto (dal momento che l'accesso viene fatto tramite un metodo, è possibile per esempio verificare preliminarmente che i dati assegnati siano compatibili, che abbiano il formato o i valori adeguati).
Un modo alternativo, su cui torneremo più avanti, per accedere alle proprietà e ai metodi dell'oggetto è l'uso di parentesi quadre, come nell'esempio seguente:
punto["y"] = document.getElementById("y").value;
document.getElementById("ris").value = punto["distanza"]();
E naturalmente avremmo anche potuto scrivere (dal momento che anche value è una proprietà di un oggetto):
punto["y"] = document.getElementById("y")["value"];
document.getElementById("ris")["value"] = punto["distanza"]();
Sito realizzato in base al template offerto da
http://www.graphixmania.it
