Home>Guide>Come utilizzare i modelli di oggetti JavaScript

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!

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?



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Proprietà CSS avanzate: crea forme con “clip-path”


Vuoi stupire i tuoi utenti con effetti speciali? Impara ad usare la proprietà CSS “clip-path”.

Come fare l’upload di file con PHP


Hai bisogno di creare un form per l’upload di un file? Scopri come fare, utilizzando poche righe di codice PHP.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)