JavaScript/Costruttori e prototipi

In questo capitolo vedremo come creare nuovi oggetti e prototipi e come modificare gli oggetti esistenti in JavaScript. Questa è una delle varie possibilità dei linguaggi che implementano i tipi di dato direttamente come oggetti, consentendo di poter agire sul "cuore" del linguaggio stesso.

Creare oggetti personalizzati

Come abbiamo spiegato nel capitolo sugli oggetti di JavaScript, per definire un nuovo prototipo di un oggetto è sufficiente definirne un costruttore, che non è altro che una funzione.

Ad esempio, volendo creare un oggetto "Macchina", sarà sufficiente creare una funzione Macchina() e instanziarla poi in una variabile:

function Macchina() {
 //...
}

var macchina = new Macchina(); //notare in questo caso la distinzione tra maiuscolo e minuscolo

Per fare riferimento alle proprietà dell'oggetto, all'interno della funzione usiamo la parola chiave this:

function Macchina(mod) { //passiamo qualche parametro al costruttore...
 this.modello = mod;
}

var macchina = new Macchina("Fiat Panda");
//posso modificare e accedere alle proprietà
macchina.modello = "Fiat 500";
alert(macchina.modello);

Per creare un metodo inseriamo invece una funzione all'interno del costruttore:

function Macchina(mod) { //passiamo qualche parametro al costruttore...

   this.modello = mod;
   this.carburante = 0;

   function rifornisci(euro) {
      var litri = euro/prezzo_benzina;
      this.carburante += litri;
   }

}

La creazione di oggetti personalizzati è in realtà piuttosto inutile nei casi presentati dagli esempi, ma può risultare comoda per applicazioni più complesse: l'uso degli oggetti permette un'organizzazione dei dati chiara ed efficiente.

Modificare gli oggetti predefiniti

Molto interessante è anche la possibilità di accedere al prototipo di un oggetto, permettendo così di modificare anche tutte le sue istanze.

Ad esempio, il seguente spezzone di codice aggiunge a tutti gli array un metodo che prende un valore e restituisce true se è presente nell'array. Per fare questo accediamo al suo prototipo:

Array.prototype.contains = function (element) {
     for(i in this) { //scorre tutti gli elementi
          //se trova l'elemento restituisce true ed esce dalla funzione
          if (this[i] == element) return true;
     }
     return false; //questa riga verrà eseguita solo se non viene trovato nulla
}


var arr = new Array('a', 'b', 'c', 'd', 'e', 'f');
if (arr.contains('g')) { //falso
   //...
}

if (arr.contains('a')) { //vero
   //...
}

I costruttori in es6 e successivi

Es6 mette a disposizione un nuovo sistema per creare oggetti: attraverso le classi. Le classi non sono altro che costruttori, ma queste semplificano notevolmente la leggibilità del codice e la creazione di metodi. Ecco un semplice esempio, in cui definiamo l'oggetto auto:

class auto {
constructor (modello, marca, targa) {
this.modello = modello;
this.marca = marca;
this.targa = targa}
stampaModello() { //questo è un metodo 
console.log (this.modello); }
}