Vai al contenuto

JavaScript/Costruttori e prototipi

Wikibooks, manuali e libri di testo liberi.
Indice del libro

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

[modifica | modifica sorgente]

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

[modifica | modifica sorgente]

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

[modifica | modifica sorgente]

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); }
}