Come utilizzare i modelli di oggetti JavaScript

La programmazione orientata agli oggetti (POO) è un paradigma di programmazione che consente di rappresentare concetti del mondo reale attraverso oggetti e classi.
JavaScript, pur essendo un linguaggio di programmazione aderente al paradigma della programmazione funzionale (o procedurale), offre anche la possibilità di utilizzare la POO attraverso l’utilizzo di modelli di oggetti.
Come utilizzare i modelli di oggetti in JavaScript per creare programmi più organizzati e facili da mantenere?
- Leggi l'articolo, ti bastano solo 1 minuto, 18 secondi
Sei di fretta? Scarica il PDF e consultalo quando vuoi!
Sommario
1 Cos'è un modello di oggetti? |
2 Proprietà e metodi di una classe |
3 Creazione di una classe e istanziazione di un oggetto |
4 Ereditarietà |
5 Conclusioni |
6 Commenti |
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?