Oggetti JavaScript: proprietà, metodi, this

Quando abbiamo introdotto i tipi di dato in JavaScript abbiamo detto che: "ciò che non è un tipo di dato primitivo è un oggetto". Iniziamo quindi a capire cosa sia un oggetto in JavaScript e come utilizzarlo nei nostri programmi.

Un oggetto è un contenitore di valori eterogenei, messi insieme a formare una struttura dati unica e tale da avere generalmente una particolare identità. Normalmente, infatti, un oggetto è utilizzato per rappresentare un'entità specifica come ad esempio una persona, un ordine, una fattura, una prenotazione, etc. tramite un'aggregazione di dati e di funzionalità.

Un oggetto tipicamente possiede:

• Dati, detti proprietà e rappresentati da coppie di nome-valore;
• Funzionalità, sono dette metodi e rappresentate da funzioni.

Object literal

Un modo per creare un oggetto è la rappresentazione letterale: si potrebbe dire che definiamo l'oggetto a partire dal proprio contenuto, come mostrato nel seguente esempio:

var oggettoVuoto = {};
var persona = { "nome": "Mario", "cognome": "Rossi"};

Tramite la notazione letterale rappresentiamo un oggetto racchiudendo tra parentesi graffe le sue proprietà e i suoi metodi.

Nella prima dichiarazione abbiamo creato un oggetto vuoto, cioè un oggetto senza proprietà né metodi, tutto sommato non di grande utilità, ma importante per capire che un oggetto è in fondo una lista di coppie di valori e come ogni lista può essere vuota.

Infatti, come possiamo vedere nella seconda dichiarazione, per definire l'oggetto persona abbiamo elencato due coppie di stringhe separate da virgole. Ciascuna coppia è formata da due stringhe separate da due punti. La prima stringa rappresenta il nome della proprietà mentre la seconda indica il suo valore.

Proprietà

Per i nomi delle proprietà di un oggetto non abbiamo le restrizioni dei nomi delle variabili. Per essi può essere utilizzata una qualsiasi stringa, anche se con qualche vincolo quando tali proprietà vengono richiamate. I doppi apici intorno al nome della proprietà sono opzionali, ma diventano obbligatori quando il nome non segue le regole per nomi delle variabili. Quindi, avremmo potuto scrivere la nostra definizione di persona nel seguente modo:

var persona = { nome: "Mario", cognome: "Rossi"};

ma per una definizione come quella che segue siamo obbligati ad usare i doppi apici:

var persona = { "primo-nome": "Mario", "secondo.nome": "Rossi"};

Una proprietà può assumere qualsiasi valore derivante da un'espressione JavaScript, compreso un altro oggetto. Quindi possiamo creare oggetti annidati come mostrato di seguito:

var persona = {
	nome: "Mario",
	cognome: "Rossi",
	indirizzo: {
		via: "Via Garibaldi",
		numero: 15,
		CAP: "00100",
		citta: "Roma"
	}
};

La proprietà indirizzo è a sua volta un oggetto composto da specifiche proprietà.

Accedere alle proprietà

Per accedere ai valori memorizzati in una proprietà di un oggetto abbiamo due approcci. Il primo approccio è la cosiddetta dot-notation in base alla quale indichiamo un oggetto e la proprietà a cui siamo interessati separandoli con un punto:

var nome = persona.nome;

Questo è in linea di massima l'approccio più utilizzato perchè è più compatto ed abbastanza familiare per chi ha lavorato con altri linguaggi di programmazione.

L'approccio alternativo è quello in cui specifichiamo la proprietà di un oggetto indicando il suo nome sotto forma di stringa tra parentesi quadre:

var nome = persona["nome"];

Questo approccio è obbligatorio quando il nome della proprietà non segue le regole per i nomi delle variabili.

Il tentativo di accedere ad una proprietà non definita in un oggetto non genera un errore, ma restituisce il valore undefined. Nel seguente esempio, quindi, la variabile eta avrà valore undefined:

var eta = persona.eta;

Creazione per definizione

Se proviamo ad assegnare un valore ad una proprietà non definita creiamo di fatto questa proprietà inizializzandola con il valore assegnato:

persona.eta = 32;

Questo aspetto ci mostra come gli oggetti in JavaScript siano entità dinamiche, nel senso che la loro struttura è molto flessibile e può essere modificata dinamicamente anche durante l'esecuzione di uno script. Ciò consente la creazione di un oggetto basato su una sorta di definizione incrementale.

In pratica, invece di definire con un unica rappresentazione letterale il nostro oggetto, possiamo partire da una rappresentazione di base ed arricchirla via via con le proprietà che vogliamo. Possiamo definire quindi il nostro oggetto persona nel seguente modo:

var persona = {};
persona.nome = "Mario";
persona.cognome = "Rossi";
persona.indirizzo = {
	via: "Via Garibaldi",
	numero: 15,
	CAP: "00100",
	citta: "Roma"
};
persona.eta = 32;

Metodi

A differenza delle proprietà di un oggetto che rappresentano dati, i metodi rappresentano attività che un oggetto può compiere. Da un punto di vista sintattico, la definizione di un metodo per un oggetto è abbastanza simile alla definizione di una proprietà. Vediamo un esempio:

function visualizzaNomeCognome() { return "Mario Rossi"; }
persona.nomeCognome = visualizzaNomeCognome;

Abbiamo definito una funzione che si limita a restituire una stringa ed abbiamo assegnato il nome della funzione ad una nuova proprietà dell'oggetto persona. Da notare che non assegniamo alla proprietà il risultato della chiamata alla funzione, ma la funzione stessa tramite il suo nome.

La proprietà nomeCognome, dal momento che contiene una funzione, è di fatto un metodo. Per eseguirlo dobbiamo far riferimento ad esso specificando le parentesi tonde come in una chiamata di funzione:

var nomeCognome = persona.nomeCognome();

Naturalmente un metodo può prevedere degli argomenti come avviene per una normale funzione.

Un modo alternativo per definire un metodo è mostrato di seguito:

persona.nomeCognome = function () { return "Mario Rossi"; }

In questo caso definiamo la funzione direttamente nell'assegnamento alla proprietà. Da notare come in questo caso non abbiamo specificato un nome per la funzione. Si parla in questo caso di funzione anomima, concetto su cui avremo modo di tornare più avanti.

Indipendentemente da come è stato definito il metodo, la chiamata avviene nello stesso modo.

this

Il metodo che abbiamo definito nell'esempio non è di grande utilità. Esso visualizza sempre la stessa stringa anche se durante l'esecuzione dello script abbiamo cambiato il valore delle proprietà nome e cognome dell'oggetto persona. Sarebbe utile avere un modo per visualizzare il valore corrente di queste proprietà.

JavaScript ci aiuta in questo mettendoci a disposizione la parola chiave this. Questa parola chiave rappresenta l'oggetto a cui appartiene il metodo invocato. Quindi possiamo riscrivere il nostro metodo nel seguente modo:

persona.nomeCognome = function () { return this.nome + " " + this.cognome; }

Questo ci garantisce la visualizzazione corretta dei dati correnti al momento della chiamata.