Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 36 di 112
  • livello avanzato
Indice lezioni

Costruttori, creare oggetti in JavaScript

Creare oggetti sfruttando l'operatore 'new' e una funzione costruttore in cui definire proprietà e metodi. Lo 'strict mode' e il comportamento di this.
Creare oggetti sfruttando l'operatore 'new' e una funzione costruttore in cui definire proprietà e metodi. Lo 'strict mode' e il comportamento di this.
Link copiato negli appunti

La creazione di un oggetto, come abbiamo visto negli esempi, è abbastanza immediata utilizzando la notazione letterale. Non c'è bisogno di definire una classe ma definiamo direttamente l'oggetto così come ci serve al momento ed eventualmente possiamo modificare la sua struttura nel corso dell'esecuzione del nostro script. Immaginiamo però di aver bisogno di più oggetti dello stesso tipo, ad esempio di più oggetti persona, che condividono la stessa struttura:

var persona = {
	nome: "Mario",
	cognome: "Rossi",
	indirizzo: "Via Garibaldi, 50 - Roma",
	email: "mario.rossi@html.it",
	mostraNomeCompleto: function() { ... },
	calcolaCodiceFiscale: function() { ... }
}

Utilizzando la notazione letterale saremmo costretti a ripetere la definizione per ciascun oggetto che vogliamo creare, cosa indispensabile per gli elementi identificativi della persona ma inutilmente ripetitiva per le parti costanti come ad esempio i metodi. In altre parole, ricorrendo alla notazione letterale nella definizione degli oggetti otteniamo un risultato non riutilizzabile.

Costruttori

Per evitare quindi di dover ridefinire da zero oggetti che hanno la stessa struttura possiamo ricorrere ad un costruttore. Un costruttore non è altro che una normale funzione JavaScript invocata mediante l'operatore new. Vediamo ad esempio come creare un costruttore per l'oggetto persona:

function persona() {
	this.nome = "";
	this.cognome = "";
	this.indirizzo = "";
	this.email = "";
	this.mostraNomeCompleto = function() {...};
	this.calcolaCodiceFiscale = function() {...};
}

Questa funzione definisce le proprietà del nostro oggetto assegnandole a se stessa (this) in qualità di oggetto ed impostando i valori predefiniti. Per creare un oggetto di tipo persona dovremo a questo punto invocare la funzione premettendo l'operatore new:

var marioRossi = new persona();
marioRossi.nome = "Mario";
marioRossi.cognome = "Rossi";
var giuseppeVerdi = new persona();
giuseppeVerdi.nome = "Giuseppe";
giuseppeVerdi.cognome = "Verdi";

In questo modo nella creazione di più oggetti con la stessa struttura ci limiteremo ad impostare i soli valori specifici che differenziano un oggetto dall'altro.

Nella definizione di un costruttore possiamo prevedere la presenza di parametri che possiamo utilizzare nell'inizializzazione del nostro oggetto. Consideriamo ad esempio la seguente definizione del costruttore dell'oggetto persona:

function persona(nome, cognome) {
	this.nome = nome;
	this.cognome = cognome;
	this.indirizzo = "";
	this.email = "";
	this.mostraNomeCompleto = function() {...};
	this.calcolaCodiceFiscale = function() {...};
}

Esso ci consente di creare ed inizializzare un oggetto specificando i valori nella chiamata al costruttore:

var marioRossi = new persona("Mario", "Rossi");
var giuseppeVerdi = new persona("Giuseppe", "Verdi");

È fondamentale utilizzare l'operatore new nella creazione di un oggetto tramite costruttore. Infatti se lo omettiamo, magari per dimenticanza, quello che otterremo non sarà la creazione di un oggetto ma l'esecuzione della funzione, con risultati imprevedibili. Ad esempio, se tentiamo di creare un oggetto persona omettendo l'operatore new:

var marioRossi = persona();

il valore della variabile marioRossi sarà undefined, dal momento che la funzione persona() non restituisce alcun valore. Inoltre, tutte le proprietà e i metodi definiti all'interno del corpo della funzione saranno assegnati all'oggetto this valido nel contesto di esecuzione della funzione, come può essere ad esempio l'oggetto globale. Questa assegnazione potrebbe ridefinire il valore di variabili omonime con effetti collaterali difficilmente prevedibili.

Per cercare di ovviare a dimenticanze accidentali dell'operatore new si può ricorrere ad una convenzione abbastanza diffusa che prevede l'uso del maiuscolo per la prima lettera del nome di un costruttore. Nel nostro caso, ad esempio, dovremmo defininire il costruttore nel seguente modo:

function Persona() {
  ...
}

Naturalmente si tratta di una semplice convenzione per aiutarci a distinguere un costruttore da una normale funzione, senza alcuna garanzia di successo.

strict mode

Possiamo affiancare a questa convenzione l'uso dello strict mode, come mostrato di seguito:

function Persona() {
'use strict'
...
}

In questa modalità, l'oggetto this risulta undefined durante l'esecuzione del codice in seguito ad una chiamata alla funzione. Questo genera un errore a runtime per il tentativo di accedere alla proprietà di un oggetto non esistente, evitando quindi invocazioni non volute del costruttore.

Purtroppo questo approccio non è sufficiente nel caso in cui il costruttore rappresenti il metodo di un oggetto:

var gente = {
	...
	persona: function() {
		'use strict'
		...
	}
};
var marioRossi = gente.persona();

In questo caso this viene associato all'oggetto gente e quindi non avremmo un errore che ci avvisi dell'errato utilizzo del costruttore.

Ti consigliamo anche