Introduzione alle classi e agli oggetti in JavaScript

Ora ci occuperemo dello studio della OOP in JavaScript. Consideriamo un esempio dalla vita reale, e poi trasferiamolo su JavaScript.

Prendiamo un'automobile come esempio. Essa ha ruote, colore, tipo di carrozzeria, cilindrata e così via. Inoltre, il conducente può darle comandi: andare, fermarsi, girare a destra, a sinistra, ecc.

Si può dire che esista una certa classe di automobili, che possiede proprietà comuni (tutte hanno ruote e a tutte si possono dare comandi).

Un'automobile specifica, parcheggiata in strada - è un rappresentante di questa classe, o, in altre parole, un oggetto di questa classe. Tutti gli oggetti di questa classe hanno proprietà: numero di ruote, colore, tipo di carrozzeria e metodi: andare, fermarsi, girare a destra, a sinistra.

In altre parole, la classe stessa - è il progetto, in base al quale in fabbrica vengono prodotte le automobili. L'oggetto invece - è l'auto stessa, costruita secondo questi progetti.

In JavaScript una classe viene creata usando la parola chiave class, seguita dal nome della classe. Creiamo la classe Car:

class Car {
	// qui il codice, cioè il progetto JavaScript dell'automobile
}

Specifichiamo ora nel nostro progetto che qualsiasi automobile, creata secondo questo progetto, avrà una proprietà per il colore e una proprietà per la quantità di carburante.

Per fare questo, all'interno della classe scriviamo la proprietà color e la proprietà fuel:

class Car {
	color; // colore dell'automobile
	fuel;  // quantità di carburante
}

Creiamo ora i metodi della nostra classe. In JavaScript i metodi sono simili a funzioni normali, solo che vengono dichiarati senza la parola chiave function.

Come già menzionato sopra, la nostra automobile può andare, può girare, può fermarsi. Creiamo i metodi corrispondenti nella nostra classe:

class Car {
	color; // colore dell'automobile
	fuel;  // quantità di carburante
	
	// Comando andare:
	go() {
		// del codice JavaScript
	}
	
	// Comando girare:
	turn() {
		// del codice JavaScript
	}
	
	// Comando fermarsi:
	stop() {
		// del codice JavaScript
	}
}

Abbiamo creato il progetto della nostra automobile. Ora bisogna andare in fabbrica e creare un oggetto di questa classe (cioè un'automobile specifica).

In JavaScript questo si fa con la parola chiave new, dopo la quale si scrive il nome della classe:

new Car; // ordiniamo alla fabbrica di produrre un'automobile

Tuttavia, se si crea semplicemente un oggetto della classe - questo non porterà a nulla (è come, ad esempio, dichiarare un array e non memorizzarlo da nessuna parte). Ci serve una variabile per conservare questo oggetto.

Lasciamo che questa variabile si chiami myCar - memorizziamo al suo interno l'oggetto da noi creato:

let myCar = new Car;

Dopo la creazione dell'automobile si può accedere alle sue proprietà. L'accesso a queste avviene attraverso il punto. Impostiamo le proprietà del nostro oggetto:

let myCar = new Car; // ordiniamo alla fabbrica di produrre un'automobile

myCar.color = 'red'; // coloriamo di rosso
myCar.fuel = 50;     // facciamo il pieno di carburante

Fatto, la nostra automobile è creata, colorata e rifornita. Ora possiamo darle comandi attraverso i metodi di questa automobile.

L'accesso ai metodi avviene anch'esso attraverso il punto, ma, a differenza della proprietà, dopo il nome del metodo bisogna scrivere le parentesi tonde. Diamo dei comandi al nostro oggetto:

myCar.go();
myCar.turn();
myCar.stop();