←
{JS} Object Constructor & Classi
home / javascript /
Lucio Paolo Asciolla
Senior Full Stack Developer
La creazione di un oggetto è abbastanza immediata utilizzando la notazione letterale ma saremmo costretti a ripetere la definizione per ciascun oggetto che vogliamo creare perché ricorrendo ad Object literal otterremo un oggetto non riutilizzabile.
Immaginiamo di aver bisogno di più oggetti dello stesso tipo, ad esempio di più oggetti persona, che condividono la stessa struttura.
Per evitare quindi di dover ridefinire da zero oggetti che hanno la stessa struttura, si pensi a degli utenti di un sito, possiamo ricorrere ad un costruttore.
Il costruttore non è altro che una normale funzione JavaScript invocata mediante l’operatore new.
Quindi quando invochiamo la formula:
var oggetto = new Object();
di fatto Object è un costruttore di oggetti predefinito in javascript.
Note: per convenzione i nomi dei costruttori sono indicati con la lettera maiuscola.
function utente() {
this.nome = "";
this.cognome = "";
this.email = "";
this.calcoloCodiceFiscale = function() {
...
};
}
Abbiamo creato una funzione che fungerà da costruttore per i nostri oggetti/ utente.
This qui assume un importanza notevole in quando farà riferimento a se stesso e di conseguenza all'oggetto che la funzione creerà.
Note: Un costruttore non è altro che una normale funzione JavaScript invocata mediante l’operatore new
var marioRossi = new utente(); marioRossi.nome = "Mario"; marioRossi.cognome = "Rossi"; var giuseppeVerdi = new utente(); lucaBianchi.nome = "Luca"; lucaBianchi.cognome = "Bianchi";
In questo esempio abbiamo creato due utenti mediante la funzione creata ed invocata dal codice new utente(), successivamente abbiamo inserito valori all'interno delle proprietà.
In realtà sarebbe possibile inserire tutti i valori in una sola linea di comando prevedendo dei paramenti all'interno della funzione stessa.
function utente(nome, cognome, email) {
this.nome = nome;
this.cognome = cognome;
this.email= email;
}
Inseriamo i dati al momento della creazione stessa dell'oggetto
var marioRossi = new utente("Mario","Rossi","mario.rossi@gmail.com");
Una classe è un’astrazione che definisce le caratteristiche che avranno gli oggetti creati da essa. In JavaScript, inizialmente, il concetto di classe non esisteva in quanto ogni oggetto è creato direttamente.
Per cercare di semplificare l’avvicinamento alla programmazione in JavaScript da parte degli sviluppatori con esperienza in altri contesti a partire da ECMASCript 6 è prevista la possibilità di utilizzare un approccio sintattico alla definizione di oggetti analogo alle classi.
Una classe è un Object Constructor con una sintassi differente:
class Persona {
constructor(nome, cognome) {
this.nome = nome;
this.cognome = cognome;
this.email = "";
this.indirizzo = "";
}
mostraNomeCompleto() {
return this.nome + " " + this.cognome;
}
}
Nonostante l’utilizzo della parola chiave class è da tener presente che quello che stiamo definendo non è in realtà una vera classe, ma un costruttore semanticamente equivalente a quello che abbiamo creato in precedenza tramite la definizione di una function.
Possiamo creare un nuovo oggetto a partire dalla classe appena definita tramite l’operatore new, in modo del tutto identico a come abbiamo fatto con il costruttore definito tramite funzione.
var marioRossi = new Persona("Mario", "Rossi");
| class Persona { constructor(nome, cognome) { | function Persona(nome, cognome){ |
| this.nome = nome; | INVARIATO |
| mostraNomeCompleto() { return this.nome + " " + this.cognome; } | mostraNomeCompleto = fuction(){ return this.nome + " " + this.cognome; } |
| get email() { return this._email; } set email(value) { … } | email: { get: function() { return this._email; }, set: function(value) { … } |
Note: get e set determinano due modalità di accesso per i metodi, uno in lettura ed uno in scrittura.