JavaScript è un linguaggio multi-paradigma che consente di scrivere programmi che seguono stili di programmazione funzionale, orientato agli oggetti e imperativo.
Per supportare modelli orientati agli oggetti, JavaScript dispone di classi. Poiché comprenderli è fondamentale, questo articolo è una guida su cosa sono le classi JavaScript e come usarle.
Sommario:
Cosa sono le classi in JavaScript?
Nella programmazione orientata agli oggetti, modelliamo i sistemi come gruppi di oggetti che interagiscono tra loro. Per funzionare, gli oggetti memorizzano i dati nelle proprietà ed eseguono azioni definite come loro metodi. Una classe definisce quali proprietà e metodi sono trasportati da oggetti dello stesso tipo. Pertanto, le classi sono progetti per oggetti.
Terminologie utilizzate nelle lezioni
Per assicurarci di essere sulla stessa lunghezza d’onda, ecco una descrizione delle classi con i termini chiave che utilizzeremo in questo articolo. Se hai già familiarità con la programmazione orientata agli oggetti, puoi passare alla sezione successiva.
❇️ Una classe è un progetto per un oggetto. Fornisce un modello da cui è possibile creare oggetti di quel tipo. La creazione di un oggetto dal modello fornito dalla classe è chiamata istanziazione.
❇️ Un membro della classe è tutto ciò che appartiene alla classe. Esistono due tipi di membri della classe: metodi e proprietà.
❇️ Una proprietà è un membro di una classe il cui scopo principale è archiviare valori. Potrebbero essere valori semplici come numeri e stringhe. Potrebbero anche essere oggetti e array complessi.
❇️ Alcune proprietà sono accessibili solo all’interno della classe e sono giustamente denominate proprietà private. Alcuni sono accessibili sia all’interno che all’esterno della classe. Tali proprietà sono chiamate proprietà pubbliche.
❇️ Un metodo è una funzione definita all’interno di una classe. Pertanto appartiene alla classe e ha accesso a proprietà pubbliche e private. Come le proprietà, abbiamo anche metodi pubblici e metodi privati.
❇️ Esistono alcuni metodi per fornire un’interfaccia affinché il codice esterno alla classe possa interagire con le proprietà all’interno della classe. Esistono due gruppi di metodi che eseguono questa operazione: getter e setter. I getter ottengono i valori delle proprietà della classe, mentre i setter impostano i valori delle proprietà della classe.
❇️ Alcuni membri sono statici. Ciò significa che sono accessibili solo sulla classe e non sulle istanze della classe.
Al contrario, alcuni membri della classe non sono statici, il che significa che è possibile accedervi solo su istanze della classe. È necessario creare un’istanza della classe prima di poter accedere a un membro non statico.
Quando si crea un’istanza di una classe, viene chiamato un metodo speciale per impostare le proprietà per l’istanza. Questo metodo è chiamato funzione di costruzione.
Spiegazione della creazione di un’istanza di una classe
Usiamo la parola chiave new e il nome della classe per istanziare una classe in JavaScript. Ad esempio, istanziamo la classe Array.
const myArr = new Array()
Creazione di classi in JavaScript
In questa sezione verrà discussa la creazione di una classe che implementi tutti i concetti trattati nel file Sezione Terminologia. Lo faremo in una serie di esempi, in cui ogni esempio si basa su quelli precedenti.
Dichiarare una classe vuota
Per dichiarare una classe in JavaScript, utilizziamo la parola chiave class e diamo un nome alla classe. Successivamente, definiamo il corpo della classe. Il corpo è racchiuso tra parentesi graffe e contiene tutti i membri della classe.
Ecco una dichiarazione di classe di esempio con un corpo vuoto:
class Dog {
}
Ora puoi istanziare la classe come segue e stamparla.
const pet = new Dog; console.log(pet);
Creazione di proprietà pubbliche
Le proprietà pubbliche sono definite con un identificatore e un valore facoltativo.
class Dog {
name = "Roy";
age;
}
Qui abbiamo definito il nome con un valore stringa e l’età senza valore.
const pet = new Dog(); console.log(pet.name); console.log(pet.age);
Definizione di metodi pubblici
Possiamo aggiungere metodi alla nostra classe all’interno del suo corpo. Definiamo un metodo nello stesso modo in cui definiremmo una funzione. Tuttavia, omettiamo la parola chiave funzione.
class Dog {
name = "Roy";
age;
walk () {
console.log("Walking");
}
}
Nell’esempio sopra abbiamo definito il metodo walk. Ogni istanza della classe Animal avrà quel metodo.
const pet = new Dog(); pet.walk();
Accesso alle proprietà dai metodi
In JavaScript, generalmente accediamo alle proprietà su un oggetto utilizzando l’operatore punto. Ad esempio, se avessimo un oggetto chiamato person e volessimo accedere alla proprietà name, lo faremmo come segue.
person.name
Tuttavia, se vogliamo accedere a una proprietà dall’interno dell’oggetto, utilizziamo la parola chiave this invece del nome dell’oggetto. Ecco un esempio:
this.name
La parola chiave this fa riferimento all’oggetto. Quindi, se volessimo accedere alle proprietà della classe dall’interno dei metodi della classe, useremmo questa sintassi.
Creazione di proprietà private
Supponiamo di volere che le proprietà del nome e dell’età definite in precedenza siano private. Ridefiniremo la classe come segue:
class Dog {
#name = "Roy";
#age;
walk () {
console.log("Walking");
}
}
Come puoi vedere, le proprietà private vengono specificate utilizzando i segni cancelletto. Se provassi ad accedervi, ti imbatteresti in errori.
const dog = new Dog(); dog.#name
Creazione di metodi Getter e Setter
Ora le proprietà del nome e dell’età della classe sono private. Pertanto, è possibile accedervi solo tramite metodi all’interno della classe.
Se vogliamo consentire al codice esterno alla classe di accedere a queste proprietà, definiamo getter e setter. Facciamolo per la proprietà name.
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
walk () {
console.log("Walking");
}
}
Con la classe definita sopra, puoi impostare il nome e visualizzarlo utilizzando il codice seguente:
const pet = new Dog(); // Setting the name pet.name = "Rex"; // Getting the name console.log(pet.name);
Creazione di metodi privati
Come le proprietà private, i metodi privati hanno il prefisso cancelletto. Pertanto, la dichiarazione di un metodo privato sarebbe simile a questa:
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Se provassi ad accedere a questi metodi dall’esterno della classe, non funzionerebbe.
const pet = new Dog(); pet.#increaseAge();
Creazione di un metodo di costruzione
È inoltre possibile definire il metodo del costruttore. Questo metodo verrà chiamato automaticamente ogni volta che crei un’istanza di una nuova classe. Il metodo del costruttore può essere utilizzato per inizializzare le proprietà. In questo esempio, inizializzeremo l’età e il nome su qualunque argomento fornito dall’utente durante l’istanziazione.
class Dog {
#name;
#age;
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Quando istanziamo la nostra classe, possiamo fornire un nome e un’età.
const pet = new Dog('Roy', 3);
console.log(pet.name);
Creazione di proprietà e metodi statici
Come accennato, è possibile accedere ai membri statici senza prima istanziare la classe. Nell’esempio seguente creeremo una proprietà e un metodo statici.
class Dog {
#name;
#age;
static genus = "Canis";
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
static bark() {
console.log("Woof");
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Ora puoi accedere alla proprietà e al metodo statici senza creare un’istanza.
console.log(Dog.genus); Dog.bark();
Eredità
Le classi possono ereditare proprietà da altre classi. Una classe che eredita membri da un’altra classe è chiamata superclasse, mentre la classe da cui eredita membri è la classe base o sottoclasse.
Per creare una superclasse in JavaScript, utilizziamo la parola chiave extends. Ecco un esempio in cui ereditiamo dalla classe Dog.
class Rottweiler extends Dog {
constructor (name, age) {
super(name, age);
this.breed = 'rottweiler';
}
}
Come puoi vedere, la lezione è sostanzialmente la stessa di prima. Tuttavia, all’interno del costruttore, abbiamo chiamato la super funzione. La parola chiave super fa riferimento al costruttore della classe base. Pertanto, abbiamo chiamato il costruttore della classe base all’interno della nostra superclasse, passando nome ed età.
const myPet = new Rottweiler(); console.log(myPet);
Conclusione
In questo articolo abbiamo trattato le lezioni. Abbiamo spiegato cosa sono, i membri che possono detenere e le diverse classificazioni per i membri. Poi, abbiamo illustrato tutto questo con degli esempi.
Successivamente, potresti voler leggere le domande del colloquio sulla programmazione orientata agli oggetti.