JavaScript include le funzionalità per la programmazione orientata agli oggetti (OOP).
Nella OOP, vuoi creare oggetti (istanze) a partire da «modelli» (classi) in modo che includano determinati dati e funzionalità.
Le proprietà che contengono dati si chiamano campi nel contesto della OOP, mentre le proprietà che contengono funzioni si chiamano metodi.
JavaScript non aveva affatto le classi prima che fossero aggiunte alla specifica del linguaggio nel 2015, ma permetteva la programmazione orientata agli oggetti tramite l'ereditarietà basata su prototipi.
E anche se oggi è disponibile la parola chiave class, JavaScript è ancora un linguaggio basato sui prototipi.
Per capire cosa significa essere un linguaggio basato sui prototipi e come funziona davvero JavaScript, torniamo indietro al periodo in cui le classi non esistevano.
Sintassi dei prototipi
Funzione costruttrice
In JavaScript, il modello (la classe) è realizzato tramite una funzione normale.
Quando una funzione deve essere usata come modello, si chiama funzione costruttrice e la convenzione è che il nome della funzione inizi con la lettera maiuscola.
Le istanze (gli oggetti) vengono create dal modello usando la parola chiave new quando si chiama la funzione costruttrice.
function Car() {
// ...
}
const myCar = new Car();
const yourCar = new Car();
È importante notare che in JavaScript le istanze e la funzione costruttrice mantengono una relazione reciproca anche dopo che le istanze sono state create.
Ogni oggetto istanza include una proprietà interna nascosta, indicata come [[prototype]] nella specifica del linguaggio.
Contiene un riferimento al valore della chiave prototype della funzione costruttrice.
Sì, hai letto bene: una funzione JavaScript può avere coppie chiave/valore perché, dietro le quinte, è anche un oggetto.
Per riassumere:
- I costruttori in JavaScript sono funzioni normali.
- Costruire una nuova istanza crea un oggetto con una relazione verso il suo costruttore, chiamata prototipo.
- Le funzioni sono oggetti (oggetti chiamabili) e quindi possono avere proprietà.
- La proprietà
prototype del costruttore (della funzione) diventerà il prototipo dell'istanza.
Campi delle istanze
Spesso vuoi che tutti gli oggetti derivati (le istanze) includano alcuni campi e ricevano dei valori iniziali per quei campi quando l'oggetto viene costruito.
Tutto questo si può realizzare tramite la parola chiave this.
All'interno della funzione costruttrice, this rappresenta il nuovo oggetto che verrà creato tramite new.
this viene restituito automaticamente dalla funzione costruttrice quando viene chiamata con new.
Questo significa che possiamo aggiungere campi alla nuova istanza aggiungendoli a this nella funzione costruttrice.
function Car(color, weight) {
this.color = color;
this.weight = weight;
this.engineRunning = false;
}
const myCar = new Car('red', '2mt');
myCar.color;
// => 'red'
myCar.engineRunning;
// => false
Metodi delle istanze
I metodi vengono aggiunti tramite la proprietà prototype della funzione costruttrice.
All'interno di un metodo, puoi accedere ai campi dell'istanza tramite this.
Questo funziona grazie alla seguente regola generale.
Quando una funzione viene chiamata come metodo di un oggetto, il suo this viene impostato sull'oggetto su cui il metodo è chiamato.
function Car() {
this.engineRunning = false;
// ...
}
Car.prototype.startEngine = function () {
this.engineRunning = true;
};
Car.prototype.addGas = function (litre) {
// ...
};
const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true
La catena dei prototipi
myCar nell'esempio qui sopra è un normale oggetto JavaScript e, se lo esaminassimo (ad esempio nella console del browser), non troveremmo una proprietà startEngine con una funzione come valore direttamente dentro l'oggetto myCar.
Quindi, come funziona il codice qui sopra?
Il segreto è quello che si chiama catena dei prototipi.
Quando provi ad accedere a una proprietà qualsiasi (campo o metodo) di un oggetto, JavaScript controlla prima se la chiave corrispondente si trova direttamente nell'oggetto stesso.
In caso contrario, continua a cercare la chiave nell'oggetto a cui fa riferimento la proprietà [[prototype]] dell'oggetto originale.
Come accennato prima, nel nostro esempio [[prototype]] punta alla proprietà prototype della funzione costruttrice.
È lì che JavaScript troverebbe la funzione startEngine, perché l'abbiamo aggiunta proprio lì.
function Car() {
// ...
}
Car.prototype.startEngine = function () {
// ...
};
E la catena non finisce qui.
La proprietà [[prototype]] di Car.prototype (myCar.[[prototype]].[[prototype]]) fa riferimento a Object.prototype (la proprietà prototype della funzione costruttrice Object).
Contiene metodi generali disponibili per tutti gli oggetti JavaScript, ad esempio toString().
In conclusione, puoi chiamare myCar.toString() e quel metodo esisterà perché JavaScript lo cerca lungo tutta la catena dei prototipi.
Nota che la catena dei prototipi viene percorsa solo quando si recupera un valore.
Impostare direttamente una proprietà o eliminare una proprietà di un oggetto istanza riguarda solo quella specifica istanza.
Potrebbe non essere quello che ti aspetti se sei abituato a un linguaggio con ereditarietà basata sulle classi.
Sintassi delle classi
Oggi JavaScript supporta la definizione di classi con la parola chiave class.
Questa è stata aggiunta alla specifica del linguaggio nel 2015.
Da un lato, questo fornisce dello zucchero sintattico che rende le classi più facili da leggere e scrivere.
La nuova sintassi è più simile a come si scrivono le classi in linguaggi come C++ o Java.
Gli sviluppatori che passano da quei linguaggi si adattano più facilmente.
Dall'altro lato, la sintassi delle classi apre la strada a nuove funzionalità del linguaggio che non sono disponibili nella sintassi dei prototipi.
Dichiarazioni di classe
Con la nuova sintassi, le classi si definiscono con la parola chiave class, seguita dal nome della classe e dal corpo della classe tra parentesi graffe.
Il corpo contiene la definizione della funzione costruttrice, cioè un metodo speciale con il nome constructor.
Questa funzione funziona esattamente come la funzione costruttrice nella sintassi dei prototipi.
Il corpo della classe contiene anche tutte le definizioni dei metodi.
La sintassi dei metodi è simile alla notazione abbreviata che abbiamo visto per aggiungere funzioni come valori dentro un oggetto, vedi Concetto Oggetti.
class Car {
constructor(color, weight) {
this.color = color;
this.weight = weight;
this.engineRunning = false;
}
startEngine() {
this.engineRunning = true;
}
addGas(litre) {
// ...
}
}
const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true
Tieni presente che, dietro le quinte, JavaScript è ancora un linguaggio basato sui prototipi.
Tutti i meccanismi che abbiamo imparato nella sezione "Sintassi dei prototipi" qui sopra valgono ancora.
Campi privati, getter e setter
Per impostazione predefinita, in JavaScript tutti i campi delle istanze sono pubblici.
È possibile accedervi e assegnarli direttamente.
Tuttavia, esiste una convenzione consolidata secondo cui i campi e i metodi che iniziano con un underscore vanno trattati come privati.
Non dovrebbero mai essere accessibili direttamente dall'esterno della classe.
I campi privati sono a volte accompagnati da getter e setter.
Con le parole chiave get e set puoi definire funzioni che vengono eseguite quando si accede a una proprietà con lo stesso nome della funzione o le si assegna un valore.
class Car {
constructor() {
this._mileage = 0;
}
get mileage() {
return this._mileage;
}
set mileage(value) {
throw new Error(`Mileage cannot be manipulated, ${value} is ignored.`);
// Just an example, usually you would not provide a setter in this case.
}
}
const myCar = new Car();
myCar.mileage;
// => 0
myCar.mileage = 100;
// => Error: Mileage cannot be manipulated, 100 is ignored.
Esercizio di apprendimento
