dal 2015 - visita n. 633
Oggetti
Oggetti

 

Oggetti

Abbiamo già visto, nell'introduzione, che JavaScript è orientato agli oggetti, ossia mette a disposizione del programmatore una serie di funzionalità e costrutti che consentono di progettare e creare applicazioni utilizzando una metodologia molto simile a quanto sarebbe possibile fare con linguaggi tipo Java, C++ o PHP5.
L'argomento oggetti, dal punto di vista teorico è abbastanza complesso, dati gli scopi di questi semplici appunti, ma in rete esistono tantissimi articoli che trattano l'argomento, come questo a carattere introduttivo presente su Wikipedia, oppure quest'altro più specialistico Object Oriented Programming in JavaScript.
L'approccio scelto per questi appunti, invece, è quello sperimentale, attraverso una serie di semplici esempi.


Creazione di un oggetto

Probabilmente i puristi della OOP (Object Oriented Programming) arricceranno il naso per questo tipo di approccio, ma detto nel modo più semplice possibile un oggetto, per quel che ci riguarda, è un'entità software caratterizzata da:

In un oggetto i dati e le procedure che operano sugli stessi sono accorpati in un'entità unica, quindi in estrema sintesi possiamo scrivere questa relazione:

  oggetto = dati + procedure  

Chi è abituato alla programmazione ad oggetti, in linguaggi tipo Java o PHP5, di norma considera gli oggetti come istanze di una classe. A parte l'orribile traduzione italiana di instance in istanza e conseguenti derivati instanziare e instanziazione, il concetto che sta dietro questo meccanismo è semplicemente che la classe costituisce una sorta di modello ideale da cui discendono, a richiesta, delle copie di lavoro, che sono appunto gli oggetti.
In Javascript la situazione è un po' diversa, proviamo a creare subito un semplice oggetto di esempio: un veicolo

function veicolo(passeggeri) {
  this.velocita = 0;
  this.passeggeri = 0;
  if (passeggeri > 0) this.passeggeri = passeggeri;
}

var autoA = new veicolo(1);
var autoB = new veicolo(3);

La prima cosa da notare è che per creare un oggetto siamo partiti dalla definizione di una funzione. Il compito che in altri linguaggi orientati agli oggetti è svolto dalle classi, definire cioè gli attributi e i metodi di un oggetto, in Javascript viene svolto dalle funzioni.

Questo particolare tipo di funzione, utilizzata nel modo che abbiamo appena visto per creare un oggetto, è detta costruttore.

La parola chiave this all'interno di un costruttore si riferisce sempre a quel particolare oggetto che stiamo creando. Quindi tutto il codice visto sopra crea due nuovi oggetti di nome autoA e autoB. In altri linguaggi si direbbe che dalla classe veicolo si creano i due oggetti autoA e autoB, istanze (copie di lavoro) della classe veicolo.
Questi due oggetti possiedono due attributi: velocità, con valore predefinito impostato a zero, e passeggeri, con valore predefinito impostato dal parametro passato alla funzione costruttore, quindi autoA con un passeggero e autoB con tre passeggeri.
Prova


Modifica degli attributi di un oggetto

Ogni oggetto possiede una propria copia personale dei valori degli attributi che lo caratterizzano. Nel costruttore gli attributi possono essere impostati a valori predefiniti, ma una volta creato l'oggetto i valori dei suoi attributi sono modificabili individualmente e possono assumere valori diversi da quelli di ciascuna copia di lavoro (o istanza) degli altri oggetti creati dalla stessa funzione costruttore.

Questo concetto si esprime dicendo che gli oggetti, anche quando vengono creati dalla stessa funzione costruttore, hanno una propria identità. Infatti nell'esempio precedente le due auto sono entrambe ferme perchè hanno velocità zero, ma autoA ha un passeggero, mentre autoB ha tre passeggeri.
Continuando con lo stesso esempio, se aggiungiamo le seguenti istruzioni:

autoA.velocita = 20;
autoB.velocita = 50;

differenziamo ulteriormente le identità dei due oggetti, avendo cambianto in entrambe le auto le rispettive velocità. In generale quindi la sintassi per accedere ad un attributo di un oggetto è:

oggetto.attributo = valore;

Con l'istruzione seguente creiamo un terzo oggetto, autoC, caratterizzata semplicemente dai valori predefiniti del costruttore:

var autoC = new veicolo();

E quindi, a questo punto dell'esecuzione, lo stato dei tre oggetti può essere rappresentato con la seguente tabella:

oggettovelocitàpasseggeri
autoA201
autoB501
autoC00


Prova


Metodi di un oggetto

Oltre agli attributi, un oggetto può possedere dei metodi. Un metodo è una funzione che opera sugli attributi di un oggetto determinandone il comportamento o le funzionalità. Possiamo creare un metodo ed assegnarlo ad un oggetto in questo modo:

function carica(passeggeri) {
  if(passeggeri > 0) this.passeggeri += passeggeri;
}

function veicolo(passeggeri) {
  this.velocita = 0;
  this.passeggeri = 0;
  if (passeggeri > 0) this.passeggeri = passeggeri;
  this.carica = carica;
}

Il metodo carica ha la funzione di imbarcare un certo numero di passaggeri sull'oggetto veicolo. L'uso di this all'interno di un metodo è analogo a quello visto nella funzione costruttore: si riferisce cioè al particolare oggetto su cui il metodo è invocato. Quindi la riga:

this.passeggeri += passeggeri;

ha questo significato: somma al valore dell'attributo passeggeri dell'oggetto su cui questo metodo è invocato, il valore dell'argomento passeggeri passato al metodo. La sintassi per invocare un metodo è la seguente:

oggetto.metodo(argomenti);

Un metodo può non avere argomenti e in questo caso il nome del metodo è seguito da una coppia di parentesi vuote ().

autoA.carica(2);

Dopo l'esecuzione del metodo il valore di autoA.passeggeri sarà uguale a 3.

Anche se il codice sopra riportato funziona, non è questo il modo migliore di creare i metodi di un oggetto. Infatti abbiamo scritto la funzione carica esternamente e quindi allo stesso livello del costruttore dell'oggetto veicolo. Questo ci preclude la possibilità di creare un metodo carica per un oggetto diverso perché allora avremmo un conflitto tra nomi di funzione.
La soluzione consiste nell'incorporare la definizione del metodo all'interno della funzione costruttore in questo modo:

function veicolo(passeggeri) {
  this.velocita = 0;
  this.passeggeri = 0;
  if(passeggeri > 0) this.passeggeri = passeggeri;

  this.carica = function(passeggeri) {
    if(passeggeri > 0) this.passeggeri += passeggeri;
  }
}

Così facendo carica viene inglobato dentro il costruttore e, quindi, dentro ciascun oggetto istanza e possiamo utilizzare senza conflitti il nome carica come metodo per altri oggetti o altre funzioni.
Prova
















Introduzione
Variabili ed Operatori
Parole riservate
Codici Carattere
HTML e JavaScript
Funzioni
Strutture di controllo
Eventi
Oggetti
Oggetti predefiniti
Espressioni Regolari



Il delitto è sempre volgare; la volgarità è sempre delitto.
Oscar Wilde

Valid CSS!
pagina generata in 0.001 secondi