Programmazione ad oggetti (OOP) con Javascript

Javascript è un linguaggio di sviluppo molto potente ed avanzato grazie al quale gli sviluppatori possono realizzare applicativi di ogni livello di complessità. Nell’era del web 2.0 l’importanza di Javascript è andata via via crescendo, essendosi moltiplicate le interfacce utente realizzate con un massiccio ricorso alle tecniche di scripting client side al fine di automatizzare i processi e migliorare le procedure di interazione previste dal semplice linguaggio di markup.

Proprio nell’ottica dello sviluppo di script complessi e articolati, può essere interessante fare accenno alle tecniche di programmazione orientata agli oggetti (OOP) con Javascript.

All’interno di questa lezione della nostra guida a Javascript, appunto, vedremo funzionaltà e costrutti grazie ai quali sarà possibile sviluppare seguendo una tecnica – seppur non identica – molto simile a quella adottata dagli sviluppatori abituati a linguaggi come Java o C++.

La funzione costruttore

Per chi è abituato a linguaggi OOP (com il già citato Java o PHP5), gli oggetti sono definiti come istanze delle classi. In Javascript il discorso è differente in quanto non esiste il costruttore classe e la creazione di un oggetto avviene mediante una semplice funzione. Vediamo un esempio:

function computer(marca) {
  this.marca = marca;
  this.tipo = 'desktop';
}

var a = new computer('Dell');

Come potete notare dall’esempio qui sopra, al posto di una classe abbiamo utilizzato una funzione la quale assolve il ruolo di costruttore, al cui interno si fa riferimento a this per indicare, appunto, le propietà ed i metodi dell’oggetto che stiamo creando.

Nel nostro esempio abbiamo creato un oggetto chiamato "a" mediante il costrutto:

var a = new computer('Dell');

In pratica abbiamo creato un oggetto "a" che rappresenta un computer di marca Dell.

Il costruttore, in sostanza, contiene le informazioni astratte che andranno a definire i singoli oggetti che con esso verranno creati: si tratta, in pratica, di una sorta di "modello" al quale tutti gli oggetti dovranno conformarsi.

Le proprietà ed il concetto di identità degli oggetti

Questo oggetto "a" possiede due proprietà (marca e tipo). La proprietà "marca" è definita mediante il parametro passato alla funzione costruttore, mente la proprietà "tipo" ha un valore di default definito all’interno della funzione stessa.

Per accedere ad una proprietà in letturà – come abbiamo visto nella lezione precedente dedicata agli oggetti – sarà sufficiente richiamarne il valore con la seguente sintassi:

nome_oggetto.nome_propieta

Oppure:

nome_oggetto[nome_propieta]

Ad esempio:

var a = new computer('Dell');
alert(a.tipo);

Una volta creato l’oggetto, inoltre, nulla vieta di modificarne le proprietà, ad esempio:

var a = new computer('Dell');
a.tipo = 'laptop';

Così facendo abbiamo modificato il valore di "tipo" dell’oggetto "a" senza tuttavia modificare in alcun modo l’attribto di default previsto nel costruttore. Questo significa che creando un nuovo oggetto "b", questo assumerà per la proprietà "tipo" il valore di default previsto nel costruttore:

var b = new computer('Lenovo');

Da questo semplice esempio possiamo intuire una caratteristica importante della programmazione ad oggetti, e cioè che ciascun oggetto mantiene una propria identità nonostante questi siano stati creati mediante la medesima funzione costruttore.

A questo punto, volendo riassumere, avremo due oggetti: l’oggetto "a" è un computer Dell di tipo laptop, l’oggetto "b" è un computer Lenovo di tipo desktop (in questo caso la proprietà "tipo" mantiene il valore di default).

I metodi

Fino ad ora abbiamo visto come creare un oggetto con Javascript e come modificarne gli proprietà mediante una semplice procedura di assegnazione. Vediamo ora cosa sono i metodi e come funzionano.

Come detto i metodi sono delle procedure che elaborano i dati delle proprietà, li modificano o li utilizzano per svolgere determinati compiti o funzionalità.

Supponiamo, per fare un esempio, di voler aggiungere alla nostra funzione costruttore un nuova proprietà "prezzo" e di voler creare un metodo in grado di applicare uno sconto:

function computer(marca) {
  this.marca = marca;
  this.tipo = 'desktop';
  this.prezzo = 400;
  this.sconto = function(percentuale) {
    this.prezzo = (this.prezzo/100)*(100-percentuale);
  }
}

Come potete notare il nostro metodo "sconto" è, di fatto, una funzione interna al costruttore che, sulla base di una percentuale di sconto passata come parametro, assegna all’oggetto un nuovo prezzo ribassato (modificando la corrispondente propietà).

Vediamo l’esempio completo:

var c = new computer('Apple');
c.prezzo = 1200;
c.sconto(20);
alert('Il prezzo del ' + c.tipo + ' ' + c.marca + ' è di Euro ' + c.prezzo);

A questo punto la nostra finestra di alert dovrebbe mostrarci il seguente messaggio:

Il prezzo del desktop Apple è di Euro 960

Conclusioni

Quello proposto in questa lezione è un primo approccio alla programmazione ad oggetti con javascript. In realtà l’argomento non può dirsi esaurito in quanto esistono diverse altre "tecniche" per realizzare oggetti con questo linguaggio che verranno trattati ed approfonditi in appositi articoli pubblicati sempre su questo sito web.