Categorie
Javascript Programmazione

{JS} Object Constructor & Classi

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.

Costruttori

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.

Creare un costruttore

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

Creare un oggetto mediante il costruttore

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à.

Costruttori con parametri

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

Le Classi

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

Sintassi a confronto

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *