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:

javascriptclass 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:

javascriptclass 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:

javascriptclass 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:

javascriptnew 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:

javascriptlet 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:

javascriptlet 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:

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