Classi e oggetti in JavaScript ES6: costruttori ed ereditarietà

Nel capitolo precedente abbiamo visto come lavorare con gli eventi in JavaScript. In questo capitolo ci concentriamo sulle classi e sugli oggetti in JavaScript.

Capire le classi e gli oggetti in JavaScript è importante: permettono di creare strutture dati più complesse e di organizzare meglio il codice. Prima di affrontare le classi e gli oggetti in JavaScript conviene conoscere le basi della programmazione orientata agli oggetti.

Che cos’è una classe in JavaScript?

Una classe è un modello che puoi usare per creare oggetti. Definisce le proprietà e i metodi che quegli oggetti avranno. Con le classi puoi creare più oggetti che condividono le stesse proprietà e gli stessi metodi, cosa molto comoda in parecchie situazioni.

Dichiarare una classe

Per creare una classe in JavaScript puoi usare la sintassi seguente:

class MaClasse {
  // Costruttore della classe
  constructor() {
    // Inizializzazione delle proprietà e dei metodi della classe
  }

// Metodi della classe
  maMethode() {
    // Codice del metodo
  }
}

Costruttore e metodi di una classe

La definizione di una classe in JavaScript comprende il costruttore, un metodo speciale che serve a creare e inizializzare un oggetto a partire da quella classe.

Il costruttore di una classe si definisce con la parola chiave « constructor » . Per esempio:

// Costruttore della classe
constructor() {
// Inizializzazione delle proprietà e dei metodi della classe
}

I metodi di una classe si definiscono come le funzioni, con la differenza che la parola chiave « function » non si usa.

// Metodi della classe
maMethode() {
 // Codice del metodo
}

Ai metodi di un oggetto si accede come alle proprietà, con la sintassi seguente: monObjet.maMethode();

const monObjet = new MaClasse();
monObjet.maMethode();

Ereditarietà con le classi

L’ereditarietà è un concetto chiave della programmazione orientata agli oggetti (OOP). Consiste nel creare una nuova classe a partire da una classe esistente, ereditandone proprietà e metodi. Serve a riutilizzare codice e a organizzare meglio l’applicazione.

In JavaScript l’ereditarietà tra classi si ottiene con la sintassi « extends ». Ecco un esempio di classe « Enfant » che eredita da una classe « Parent »:

class Parent {
  constructor(nom) {
    this.nom = nom;
  }

saluer() {
    console.log(Bonjour, je suis ${this.nom});
  }
}

class Enfant extends Parent {
  constructor(nom, age) {
    super(nom);
    this.age = age;
  }
}

const enfant1 = new Enfant('Marie', 7);
enfant1.saluer(); // Bonjour, je suis Marie

Usare il metodo super

Il metodo super serve a chiamare un metodo della classe genitore da una classe figlia. Per esempio, se hai una classe Animal con un metodo « move() » che definisce come si spostano gli animali, e una classe Chat che eredita da Animal, puoi usare super per chiamare il metodo « move() » della classe Animal dalla classe Chat. Ecco un esempio di codice:

class Animal {
  move() {
    console.log('Je me déplace');
  }
}

class Chat extends Animal {
  move() {
    console.log('Je me déplace en sautant');
    super.move();
  }
}

const monChat = new Chat();
monChat.move();
// mostra "Je me déplace en sautant" poi "Je me déplace"

Metodi statici

I metodi statici appartengono alla classe stessa e non alle sue istanze. Si possono chiamare senza istanziare la classe. Per esempio, puoi definire nella classe Animal un metodo statico « getAnimalType() » che restituisce il tipo di animale. Ecco un esempio di codice:

class Animal {
  static getAnimalType() {
    return 'Animal';
  }
}

console.log(Animal.getAnimalType()); // mostra "Animal"

I metodi statici non possono essere chiamati sulle istanze della classe. Se provi a chiamare « getAnimalType() » su un’istanza della classe Animal, per esempio, ottieni un errore.

Come manipolare le proprietà del nostro oggetto?

Puoi anche passare parametri al costruttore della classe per inizializzare le proprietà dell’oggetto:

class MaClasse {
  constructor(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }
}
const monObjet = new MaClasse("Valeur de param1", "Valeur de param2");

Per accedere a una proprietà di un oggetto puoi usare la sintassi seguente:

monObjet.maPropriete;

Per modificare una proprietà di un oggetto puoi usare la sintassi seguente:

monObjet.maPropriete = "Nouvelle valeur";

Per eliminare una proprietà di un oggetto puoi usare l’operatore « delete » così:

delete monObjet.maPropriete;

Non puoi eliminare una proprietà di un oggetto se è definita sul prototipo dell’oggetto. Per sapere come gestire le proprietà ereditate, vedi la sezione seguente sull’ereditarietà con gli oggetti.

Aggiungere getter e setter alla nostra classe

I getter e i setter sono metodi che permettono di leggere e modificare le proprietà di un oggetto in modo controllato. Si usano spesso quando vuoi aggiungere una logica specifica durante la lettura o la modifica di una proprietà.

Ecco un esempio di uso di getter e setter in una classe:

class MonObjet {
  constructor(propriete) {
    this._propriete = propriete;
  }

// Getter
  get propriete() {
    return this._propriete;
  }

// Setter
  set propriete(value) {
    this._propriete = value;
  }
}

const objet = new MonObjet('valeur initiale');
console.log(objet.propriete); // mostra 'valeur initiale'

objet.propriete = 'nouvelle valeur';
console.log(objet.propriete); // mostra 'nouvelle valeur'

Getter e setter sono metodi, non proprietà. Devi quindi usare la sintassi objet.propriete() per leggerne il valore, invece di objet.propriete (senza parentesi).

Nell’esempio qui sopra abbiamo usato un getter per leggere il valore della proprietà _propriete e un setter per modificarlo. Abbiamo anche definito una proprietà _propriete con la parola chiave this nel costruttore della classe. Questa proprietà è privata e si può modificare solo tramite i getter e i setter.

class MonObjet {
  constructor(valeur) {
    this._maPropriete = valeur;
  }

get maPropriete() {
    return this._maPropriete;
  }

set maPropriete(valeur) {
    if (typeof valeur === 'string') {
      this._maPropriete = valeur;
    } else {
      console.log('La valeur doit être une chaîne de caractères');
    }
  }
}

const monObj = new MonObjet('ma valeur');
console.log(monObj.maPropriete); // Mostra 'ma valeur'
monObj.maPropriete = 42; // Mostra 'La valeur

Conclusione

Abbiamo visto come usare classi e oggetti in JavaScript per strutturare e organizzare il codice in modo più efficace, poi  come creare e manipolare oggetti a partire dalle classi usando il costruttore e i metodi. Abbiamo anche affrontato l’ereditarietà tra classi con il metodo super e i metodi statici. Infine abbiamo parlato di getter e setter, che permettono di controllare l’accesso alle proprietà di un oggetto e la loro modifica.

Nel capitolo successivo vedremo come gestire gli errori e fare il debug del codice con try-catch e gli strumenti di debug del browser. Ci servirà a capire meglio che cosa succede nel nostro codice e a correggerlo quando serve.