Madame Lelica

Introduzione

JavaScript è un linguaggio basato su prototipi e ogni oggetto in JavaScript ha una proprietà interna nascosta chiamata ] che può essere utilizzata per estendere le proprietà e i metodi dell’oggetto. Puoi leggere di più sui prototipi nella nostra Comprensione dei prototipi e dell’ereditarietà nel tutorial JavaScript.

Fino a poco tempo fa, gli sviluppatori industriosi utilizzavano funzioni di costruzione per imitare un modello di progettazione orientato agli oggetti in JavaScript., La specifica del linguaggio ECMAScript 2015, spesso indicata come ES6, ha introdotto le classi nel linguaggio JavaScript. Le classi in JavaScript in realtà non offrono funzionalità aggiuntive e sono spesso descritte come “zucchero sintattico” rispetto ai prototipi e all’ereditarietà in quanto offrono una sintassi più pulita ed elegante. Poiché altri linguaggi di programmazione utilizzano classi, la sintassi della classe in JavaScript rende più semplice per gli sviluppatori spostarsi tra le lingue.

Le classi sono Funzioni

Una classe JavaScript è un tipo di funzione., Le classi vengono dichiarate con la parola chiave class. Useremo function expression syntax per inizializzare una funzione e class expression syntax per inizializzare una classe.

// Initializing a function with a function expressionconst x = function() {}

// Initializing a class with a class expressionconst y = class {}

Possiamo accedere al]di un oggetto utilizzando ilObject.getPrototypeOf() metodo. Usiamolo per testare la funzione vuota che abbiamo creato.

Object.getPrototypeOf(x);

Output
ƒ () { }

Possiamo anche usare quel metodo sulla classe che abbiamo appena creato.,

Object.getPrototypeOf(y);

Output
ƒ () { }

Il codice dichiarato confunctioneclassentrambi restituiscono una funzione]. Con i prototipi, qualsiasi funzione può diventare un’istanza del costruttore utilizzando la parola chiave new.

Output
x {}constructor: ƒ ()

Questo vale anche per le classi.

Output
y {}constructor: class

Questi esempi di costruttori di prototipi sono altrimenti vuoti, ma possiamo vedere come sotto la sintassi, entrambi i metodi stanno ottenendo lo stesso risultato finale.,

Definizione di una classe

Nel tutorial prototipi e ereditarietà, abbiamo creato un esempio basato sulla creazione di personaggi in un gioco di ruolo basato su testo. Continuiamo con questo esempio qui per aggiornare la sintassi dalle funzioni alle classi.

Una funzione del costruttore viene inizializzata con un numero di parametri, che verrebbero assegnati come proprietà dithis, riferendosi alla funzione stessa. La prima lettera dell’identificatore sarebbe maiuscola per convenzione.

// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}

Quando traduciamo questo nella sintassi della classe, mostrata sotto, vediamo che è strutturata in modo molto simile.

// Initializing a class definitionclass Hero { constructor(name, level) { this.name = name; this.level = level; }}

Sappiamo che una funzione di costruttore è pensata per essere un progetto di oggetto dalla maiuscola della prima lettera dell’inizializzatore (che è opzionale) e attraverso la familiarità con la sintassi. La parola chiave class comunica in modo più diretto l’obiettivo della nostra funzione.,

L’unica differenza nella sintassi dell’inizializzazione è l’utilizzo della parola chiave class invece di function e l’assegnazione delle proprietà all’interno di un metodo constructor().

Definizione dei metodi

La pratica comune con le funzioni del costruttore è quella di assegnare i metodi direttamente alprototype invece che nell’inizializzazione, come si vede nelgreet() metodo di seguito.

Con le classi questa sintassi è semplificata e il metodo può essere aggiunto direttamente alla classe., Utilizzando la stenografia della definizione del metodo introdotta in ES6, definire un metodo è un processo ancora più conciso.

Diamo un’occhiata a queste proprietà e metodi in azione. Creeremo una nuova istanza diHero usando la parola chiavenew e assegneremo alcuni valori.

const hero1 = new Hero('Varg', 1);

Se stampiamo ulteriori informazioni sul nostro nuovo oggetto conconsole.log(hero1), possiamo vedere maggiori dettagli su ciò che sta accadendo con l’inizializzazione della classe.,

Output
Hero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

Si può vedere l’output che il constructor() e greet() funzioni sono state applicate __proto__ o ] di hero1 e non direttamente come un metodo su hero1 oggetto. Mentre questo è chiaro quando si creano funzioni di costruzione, non è ovvio durante la creazione di classi. Le classi consentono una sintassi più semplice e succinta, ma sacrificano una certa chiarezza nel processo.,

Estendere una classe

Una caratteristica vantaggiosa delle funzioni e delle classi del costruttore è che possono essere estese in nuovi progetti di oggetti basati sul genitore. Ciò impedisce la ripetizione del codice per oggetti simili ma che necessitano di alcune funzionalità aggiuntive o più specifiche.

È possibile creare nuove funzioni del costruttore dal genitore utilizzando il metodocall()., Nell’esempio seguente, creeremo una classe di caratteri più specifica chiamata Magee assegneremo le proprietà di Herousando call(), oltre ad aggiungere una proprietà aggiuntiva.

A questo punto, possiamo creare una nuova istanza di Mageusando le stesse proprietà di Hero e una nuova che abbiamo aggiunto.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Inviando hero2alla console, possiamo vedere che abbiamo creato un nuovo Mage basato sul costruttore.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)

Con le classi ES6, la parola chiave superviene utilizzata al posto di call per accedere alle funzioni padre. Useremo extends per fare riferimento alla classe genitore.

Ora possiamo creare una nuova istanzaMage nello stesso modo.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Stamperemo hero2 alla console e visualizzare l’uscita.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage

L’output è quasi esattamente lo stesso, tranne che nella costruzione della classe il]è collegato al genitore, in questo casoHero.

Di seguito è riportato un confronto side-by-side dell’intero processo di inizializzazione, aggiunta di metodi e ereditarietà di una funzione di costruttore e di una classe.

Sebbene la sintassi sia abbastanza diversa, il risultato sottostante è quasi lo stesso tra entrambi i metodi. Le classi ci danno un modo più conciso di creare progetti di oggetti e le funzioni del costruttore descrivono in modo più accurato ciò che sta accadendo sotto il cofano.

Conclusione

In questo tutorial, abbiamo imparato a conoscere le somiglianze e le differenze tra le funzioni del costruttore JavaScript e le classi ES6. Sia le classi che i costruttori imitano un modello di ereditarietà orientato agli oggetti in JavaScript, che è un linguaggio di ereditarietà basato su prototipi.,

Comprendere l’ereditarietà prototipica è fondamentale per essere uno sviluppatore JavaScript efficace. Avere familiarità con le classi è estremamente utile, poiché le librerie JavaScript popolari come React fanno uso frequente della sintassiclass.