Come utilizzare i modelli di oggetti JavaScript

Cos'è un modello di oggetti?

Un modello di oggetti in JavaScript è una rappresentazione di un oggetto del mondo reale attraverso una classe.
Una classe, in programmazione, è una struttura che descrive le proprietà e i metodi di un oggetto.

Ad esempio, possiamo creare una classe “Automobile” che descrive le proprietà di un’automobile come la marca, il modello e l’anno di produzione, e i metodi come “guida” e “ferma”.

Ma cosa sono più precisamente proprietà e metodi?

Proprietà e metodi di una classe

In programmazione orientata agli oggetti, le proprietà (chiamate anche campi o attributi) sono le caratteristiche o le informazioni che descrivono un oggetto.
Un esempio di proprietà per l’oggetto “automobile” potrebbe essere la marca, il modello o l’anno. Si tratta appunto di informazioni sull’oggetto.
Possiamo accedere e modificare le proprietà di un oggetto utilizzando la notazione “.” come ad esempio:
miaAuto.anno = 2022

I metodi, invece, sono le azioni o i comportamenti che un oggetto può eseguire.
Un esempio di metodo per l’oggetto “automobile” potrebbe essere “guida” o “spegni il motore”.
Possiamo chiamare un metodo su un oggetto utilizzando la notazione “.” come ad esempio:
miaAuto.guida()

Per fare una similitudine con il mondo reale, le proprietà possono essere paragonate alle caratteristiche fisiche di un oggetto reale come ad esempio la lunghezza, l’altezza, il peso.

I metodi invece possono essere paragonati alle azioni che un oggetto può compiere, come ad esempio camminare, correre, parlare.

Come una persona ha un’altezza, un peso e può camminare, parlare, un’automobile ha una marca, un modello e può essere guidata.

In sintesi, utilizzando proprietà e metodi, possiamo modellare gli oggetti in modo da descrivere come essi si comportano e come vengono utilizzati.

Bello vero? Ma passiamo ora ad un po’ di pratica!

Creazione di una classe e istanziazione di un oggetto

Per creare una classe in JavaScript, possiamo utilizzare due metodi alternativi:

1. FUNCTION: la sintassi per creare una classe utilizzando la “function” è simile a quella per creare una funzione normale.
Si utilizza la parola chiave “function” seguita dal nome della classe e si definiscono le proprietà e i metodi all’interno della funzione utilizzando la notazione “this”.

2. CLASS: la sintassi per creare una classe utilizzando la “class” è invece più simile a quella utilizzata in altri linguaggi di programmazione orientati agli oggetti come Java o C#.
Si utilizza la parola chiave “class” seguita dal nome della classe e si definiscono le proprietà e i metodi all’interno della classe utilizzando la notazione “this”.

// Metodo 1 - function
function Automobile(marca, modello, anno) {
    this.marca = marca;
    this.modello = modello;
    this.anno = anno;
    this.guida = function() {
        console.log("Sto guidando la mia " + this.marca + " " + this.modello);
    }
}

// Metodo 2 - class
class Automobile {
    constructor(marca, modello, anno) {
        this.marca = marca;
        this.modello = modello;
        this.anno = anno;
    }
    guida() {
        console.log(`Sto guidando la mia ${this.marca} ${this.modello}`);
    }
}

In entrambi i casi si ottiene lo stesso risultato e si può creare un oggetto istanza della classe utilizzando la notazione “new” seguita dal nome della classe e i valori per le proprietà:

let miaFiat500 = new Automobile("Fiat", "500", 2020);
console.log(miaFiat500.marca); // stamperà "Fiat"
miaFiat500.guida(); // stamperà "Sto guidando la mia Fiat 500"

In questo esempio abbiamo creato un’istanza della classe “Automobile” assegnando valori alle proprietà “marca”, “modello” e “anno” e abbiamo utilizzato il metodo “guida” per stampare un messaggio a console.
Semplice vero?

Ereditarietà

L’ereditarietà è un concetto fondamentale della programmazione orientata agli oggetti che consente di creare nuove classi partendo da classi esistenti.

In pratica, una classe “figlia” può ereditare tutte le proprietà e i metodi di una classe “madre” e, se necessario, può anche ridefinirli o aggiungerne di nuovi.

In JavaScript, la sintassi per creare una classe ereditando da un’altra classe è la seguente:

class Suv extends Automobile {
    constructor(marca, modello, anno, numeroRuote) {
        super(marca, modello, anno);
        this.numeroRuote = numeroRuote;
    }
    fuoristrada() {
        console.log(`La ${this.marca} ${this.modello} sta facendo fuoristrada`);
    }
}

Nell’esempio sopra, la classe “Suv” eredita tutte le proprietà e i metodi della classe “Automobile” e può utilizzarle senza doverle riscrivere.
Inoltre, la classe “Suv” ha anche una sua proprietà “numeroRuote” e un suo metodo “fuoristrada” che la rendono unica rispetto alla classe “Automobile”.

In parole semplici, un Suv è una Automobile con maggiori particolarità specifiche, quindi un sottoinsieme.

L’ereditarietà permette di risparmiare tempo e codice, in quanto non si dovranno riscrivere le stesse proprietà e metodi in più classi, ma si potrà utilizzare quelli già scritti nella classe madre.

let mioSuv = new Suv("Jeep", "Cherokee", 2021, 4);
console.log(mioSuv.numeroRuote); // stamperà "4"
mioSuv.fuoristrada(); // stamperà "La Jeep Cherokee sta facendo fuoristrada"

Conclusioni

In conclusione, utilizzare i modelli di oggetti in JavaScript ci consente di creare programmi più organizzati e facili da mantenere, rappresentando concetti del mondo reale attraverso classi e oggetti.

L’utilizzo dell’ereditarietà ci consente inoltre di creare gerarchie di oggetti e condividere metodi e proprietà tra classi.

Speriamo che questo articolo vi sia stato utile per comprendere come utilizzare i modelli di oggetti in JavaScript, non resta che approfondire l’argomento!

E tu cosa ne pensi?