JavaScript Prototypal Inheritance

Sommario: in questo tutorial, imparerai come funziona l’eredità prototipale JavaScript.

Introduzione all’ereditarietà prototipale in JavaScript

Se avete lavorato con altri linguaggi di programmazione orientati agli oggetti come Java o C++, avrete familiarità con il concetto di ereditarietà.

In questo paradigma di programmazione, una classe è un modello per creare oggetti. Se volete che una nuova classe riutilizzi le funzionalità di una classe esistente, potete creare una nuova classe che estende la classe esistente. Questa è chiamata ereditarietà classica.

JavaScript non usa l’ereditarietà classica. Invece, usa l’eredità prototipale.

Nell’eredità prototipale, un oggetto “eredita” le proprietà da un altro oggetto tramite il collegamento prototipale.

Eredità prototipale JavaScript e __proto__

Facciamo un esempio per rendere il concetto più chiaro.

Il seguente definisce un oggetto person:

Code language: JavaScript (javascript)

L’oggetto person ha due proprietà:

• name che contiene un valore stringa.
• greet che contiene un valore che è una funzione. Il greet è conosciuto come un metodo dell’oggetto person.

Di default, JavaScript vi fornisce una funzione Object() e un prototipo di oggetto a cui si può accedere tramite la proprietà prototype della funzione Object():

Quando usate la sintassi dei letterali di oggetto per definire un oggetto, l’oggetto è un’istanza del Object. Pertanto, l’espressione person instanceof Object restituisce true:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

L’oggetto person si collega anche al Object.prototype tramite il collegamento ].

In altre parole, è possibile accedere a qualsiasi proprietà dell’oggetto Object.prototype tramite l’oggetto person. Per esempio:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Il è la conversione predefinita da un oggetto a una stringa.

Quando chiamate il metodo toString() sull’oggetto person, JavaScript non lo trova. Quindi JavaScript segue la catena dei prototipi e cerca il metodo sull’oggetto Object.prototype. JavaScript trova il metodo toString() sull’oggetto Object.prototype e lo esegue.

Per accedere al prototipo dell’oggetto person, potete usare la sua proprietà __proto__:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Di seguito viene definito un altro oggetto chiamato teacher. L’oggetto teacher ha il metodo teach():

Code language: JavaScript (javascript)

Se volete che l’oggetto teacher acceda a tutte le proprietà dell’oggetto person, potete impostare il prototipo dell’oggetto teacher sull’oggetto person:

Code language: JavaScript (javascript)

Nota che non dovresti mai usare il __proto__ nel codice di produzione. Questo è solo a scopo di apprendimento e comprensione.

Ora, l’oggetto teacher può accedere alla proprietà name e al metodo greet() dall’oggetto person tramite la catena dei prototipi:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Quando chiamate il metodo greet() sull’oggetto teacher, JavaScript lo trova prima sull’oggetto teacher.

Siccome JavaScript non può trovare il metodo sull’oggetto teacher, segue la catena dei prototipi e cerca il metodo sull’oggetto person. Questa volta, JavaScript può trovare il metodo sull’oggetto person ed esegue il metodo greet().

In JavaScript, diciamo che l’oggetto teacher eredita le proprietà dell’oggetto person. E questa è l’eredità prototipale.

Un modo standard per implementare l’eredità prototipale in ES5

ES5 ha fornito un modo standard per lavorare con l’eredità prototipale usando il metodo Object.create().

Nota che ora dovresti usare le nuove parole chiave ES6 class e extends per implementare l’eredità. È molto più semplice.

Il metodo Object.create() crea un nuovo oggetto e usa un oggetto esistente come prototipo del nuovo oggetto:

Code language: JavaScript (javascript)

Il metodo Object.create() accetta due argomenti:

• Il primo argomento (proto) è un oggetto usato come prototipo del nuovo oggetto.
• Il secondo argomento (propertiesObject), se fornito, è un oggetto opzionale che definisce proprietà aggiuntive per il nuovo oggetto.

Supponiamo di avere un oggetto person:

Code language: JavaScript (javascript)

Il seguente crea un oggetto vuoto teacher con il __proto__ dell’oggetto person:

Code language: JavaScript (javascript)

Poi potete definire le proprietà per l’oggetto teacher:

Code language: JavaScript (javascript)

Oppure potete fare tutti questi passi in una dichiarazione come segue:

Code language: JavaScript (javascript)

ES5 ha anche introdotto il metodo Object.getPrototypeOf() che restituisce il prototipo di un oggetto. Per esempio:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Summary

• L’ereditarietà permette a un oggetto di usare le proprietà e i metodi di un altro oggetto.
• JavaScript usa l’ereditarietà prototipale ottenuta tramite il collegamento dei prototipi.