Informazioni sulle classi JavaScript

INTRODUZIONE

JavaScript è una lingua basata su prototipazione e ogni oggetto ha una proprietà nascosta interna chiamata ] che può essere utilizzato per estendere le proprietà e i metodi di oggetti. È possibile ottenere maggiori informazioni sui prototipi delle nostre informazioni sul tutorial sui prototipi e l’ereditarietà in JavaScript.

fino a poco tempo fa, gli sforzi utilizzavano le funzioni di costruzione per imitare un motivo di progettazione orientato agli oggetti in JavaScript. La specifica della lingua di ECMAScript 2015, spesso chiamata ES6, ha introdotto lezioni in linguaggio JavaScript. Le classi JavaScript non offrono davvero funzionalità aggiuntive e spesso si descrivono come elementi che forniscono “zucchero sintattico” rispetto ai prototipi e dall’eredità, poiché offrono una sintassi più pulita e pulitrice. Poiché altri linguaggi di programmazione utilizzano lezioni, la sintassi della classe JavaScript consente agli sviluppatori di alternare le lingue più direttamente.

Le classi sono funzioni

Una classe JavaScript è un tipo di funzione. Le lezioni sono dichiarate con la parola chiave class. Utilizzeremo la sintassi dell’espressione della funzione per inizializzare una sintassi di espressioni di funzione e classe per inizializzare una classe.

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

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

Possiamo accedere a ] di un oggetto utilizzando il metodo Object.getPrototypeOf(). Utilizzeremo che per testare la funzione vuota che creiamo.

Object.getPrototypeOf(x);

Output
ƒ () { }

Possiamo anche utilizzare questo metodo in La classe che abbiamo appena creato.

Object.getPrototypeOf(y);

Output
ƒ () { }

Il codice dichiarato con function e class mostra una funzione ]. Con i prototipi, qualsiasi funzione può essere convertita in un’istanza del costruttore medio La parola chiave new.

const x = function() {}// Initialize a constructor from a functionconst constructorFromFunction = new x();console.log(constructorFromFunction);

Output
x {}constructor: ƒ ()

Si applica anche alle lezioni.

const y = class {}// Initialize a constructor from a classconst constructorFromClass = new y();console.log(constructorFromClass);

Output
y {}constructor: class

Questi esempi di I costruttori di prototipo, altrimenti, sono vuoti. Tuttavia, possiamo vedere che sotto la sintassi entrambi i metodi ottengono lo stesso risultato finale.

Definisci una classe

Nel tutorial del prototipo e nell’eredità, prepariamo un esempio basato sulla creazione di caratteri in un gioco di ruoli basato sul testo. Continueremo con quell’esempio qui per aggiornare la sintassi delle funzioni alle classi.

Una funzione costruttiva viene inizializzata con diversi parametri che verrebbero assegnati come proprietà di this , in allusione 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 in sintassi della classe, che è mostrato allora, vediamo che la sua struttura è abbastanza simile.

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

Sappiamo che una funzione costruttore è progettata Per essere uno schema oggetto per l’uso della maiuscolo nella prima lettera dell’iniziatore (opzionale) e attraverso la familiarità con la sintassi. La parola chiave class comunica in modo più diretto all’obiettivo della nostra funzione.

L’unica differenza nella sintassi di inizializzazione ha a che fare con l’uso della parola chiave class invece di function e con l’assegnazione delle proprietà all’interno di un metodo constructor().

Definisci metodi

La pratica comune con le funzioni di costruzione è di assegnare metodi direttamente a prototype anziché inizializzazione, come può essere visto nell’ID

sotto.

function Hero(name, level) { this.name = name; this.level = level;}// Adding a method to the constructorHero.prototype.greet = function() { return `${this.name} says hello.`;}

Con le classi, questa sintassi è semplificata e il Il metodo può essere aggiunto direttamente alle classi. Quando si utilizza la definizione del metodo del metodo introdotto in ES6, si ottiene una concisione ancora maggiore quando si definisce un metodo.

class Hero { constructor(name, level) { this.name = name; this.level = level; } // Adding a method to the constructor greet() { return `${this.name} says hello.`; }}

Osserviamo queste proprietà e metodi in azione. Creeremo una nuova istanza di Hero utilizzando la parola chiave new e assegna alcuni valori.

Se stampiamo ulteriori informazioni sul nostro nuovo oggetto con , possiamo apprezzare maggiori dettagli su ciò che accade con l’inizializzazione della classe.

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

Possiamo vedere nel risultato che le funzioni constructor() e greet() Si applicavano a __proto__ o ] da hero1, e non direttamente come Un metodo nell’oggetto hero1. Sebbene ciò sia rivelato nella creazione di funzioni del costruttore, non è evidente durante la creazione di lezioni. Le lezioni consentono una sintassi più semplice e succinta, anche se sacrificano alcune chiarezza nel processo.

Espandi una classe

Una caratteristica vantaggiosa delle funzioni e delle classi di costruzione è che possono essere estese a nuovi schemi di oggetti in base all’elemento principale. Ciò impedisce la ripetizione del codice per oggetti simili, ma hanno bisogno di funzionalità aggiuntive o più specifiche.

È possibile creare nuove funzioni di costruzione dall’elemento principale utilizzando il metodo call(). Nell’esempio seguente creeremo una classe caratteriale più specifica chiamata Mage e ti assegneremo le proprietà di Hero usando call(), oltre ad aggiungere una proprietà.

// Creating a new constructor from the parentfunction Mage(name, level, spell) { // Chain constructor with call Hero.call(this, name, level); this.spell = spell;}

A questo punto, Possiamo creare una nuova istanza di Mage utilizzando le stesse proprietà di Hero, oltre a uno nuovo che aggiungiamo.

Invio hero2 Alla console, possiamo apprezzare che creiamo una nuova classe Mage in base alla costructoria.

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

con le classi ES6, la parola chiave viene utilizzato invece di call per accedere alle funzioni principali. Utilizzeremo extends per fare riferimento alla classe principale.

// Creating a new class from the parentclass Mage extends Hero { constructor(name, level, spell) { // Chain constructor with super super(name, level); // Add a new property this.spell = spell; }}

Ora possiamo creare una nuova istanza di Mage nello stesso modo.

PRICERO hero2 sulla console e vedremo il risultato.

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

Il risultato è quasi esattamente lo stesso, con la differenza che nella costruzione della classe ] è collegato all’elemento principale; In questo caso, Hero.

Di seguito è riportato un confronto parallelo dell’intero processo di inizializzazione, incorporazione di metodi e ereditarietà di una funzione di costruttore e di una classe.

function Hero(name, level) { this.name = name; this.level = level;}// Adding a method to the constructorHero.prototype.greet = function() { return `${this.name} says hello.`;}// Creating a new constructor from the parentfunction Mage(name, level, spell) { // Chain constructor with call Hero.call(this, name, level); this.spell = spell;}

// Initializing a classclass Hero { constructor(name, level) { this.name = name; this.level = level; } // Adding a method to the constructor greet() { return `${this.name} says hello.`; }}// Creating a new class from the parentclass Mage extends Hero { constructor(name, level, spell) { // Chain constructor with super super(name, level); // Add a new property this.spell = spell; }}

Sebbene La sintassi è molto diversa, il risultato sottostante è quasi lo stesso per entrambi i metodi. Le lezioni ci offrono un’alternativa più concreta per creare schemi di oggetti e le funzioni del costruttore descrivono più precisamente cosa succede sullo sfondo.

Conclusione

In questo tutorial, ha incorporato la conoscenza delle somiglianze e Differenze tra le funzioni del costruttore di Javascript e le classi ES6. Entrambe le classi e le funzioni di costruzione imitano un modello di ereditarietà orientato agli oggetti per JavaScript, che è una lingua del patrimonio basata su prototipo.

Comprensione del patrimonio prototipo è fondamentale per eseguire efficacemente come sviluppatore JavaScript. Familiarizzare con le lezioni è estremamente utile, dal momento che nelle popolari librerie JavaScript come la sintassi viene spesso utilizzata class.