Classi OOP in JavaScript | Spiegato

Prima Es6, "prototipi"Sono stati utilizzati per simulare le classi in JavaScript, in cui ulteriori proprietà possono essere associate a un prototipo usando l'eredità. Quando una versione nuova e migliorata di Es5 è stato introdotto, noto come Es6, Classi JavaScript sono stati aggiunti ad esso.

In ES6, le classi sono considerate una componente fondamentale di JavaScript e ha molto più semplice E incline a errori sintassi rispetto ai prototipi. Simile alla programmazione orientata agli oggetti (OOP), la classe JavaScript comprende un metodo del costruttore, alcune proprietà, metodi e oggetti specifici del tipo di classe dato.

Questo post spiega Classi OOP In JavaScript con l'aiuto di esempi adatti. Quindi iniziamo!

Classi OOP in JavaScript

Come accennato in precedenza, vengono introdotte le classi JavaScript Es6. Offrono un modo conciso per dichiarare la classe utilizzando una sintassi simile a quello che utilizziamo in OOP.

In JavaScript, puoi usare il "classe"Parola chiave per la definizione di una classe. Aggiunge lo zucchero sintattico (un buon tipo di zucchero) sul modello di eredità del prototipo esistente.

Sintassi delle classi OOP in JavaScript

Per creare una classe OOP in JavaScript, devi seguire la sintassi di seguito:

Class ClassName
costructor () …

Qui, "classe"È una parola chiave utilizzata per creare una classe. Inoltre, una classe OOP deve avere un metodo chiamato "costruttore()".

Esempio: creare la classe OOP in JavaScript

Definiremo una classe chiamata "Persona"Che ha due proprietà:"nome" E "età":

persona di classe
costructor ()
Questo.name = 'Alex';
Questo.età = 25;

Per utilizzare la classe di persona, dobbiamo creare un oggetto O esempio della classe specificata:

Lascia che persona1 = new Person ();

Ora, "persona1"L'oggetto può accedere alle proprietà del"Persona" classe:

console.registro (persona1.nome + "" + persona1.età);

Come accennato in precedenza, una classe OOP in JavaScript deve contenere un costruttore. Vuoi saperne di più sui costruttori in JavaScript? Se sì, segui la sezione di seguito donata.

Costruttori per le classi OOP in JavaScript

Costruttore è un metodo invocato quando si crea un'istanza di una classe OOP. Viene anche usato per inizializzare gli oggetti all'interno di una classe. Tuttavia, JavaScript creerà automaticamente ed eseguirà un costruttore vuoto se non è stato definito alcun metodo di costruttore per una classe OOP.

Tipi di costruttori per le classi OOP in JavaScript

In JavaScript, ci sono i seguenti due tipi di costruttori:

• Costruttore predefinito
• Costruttore parametrizzato

La prossima sezione spiegherà brevemente il costruttore predefinito e parametrizzato e il loro utilizzo in JavaScript.

Costruttore predefinito per le classi OOP in JavaScript

È inoltre possibile definire esplicitamente un costruttore predefinito senza argomenti se si desidera eseguire operazioni specifiche durante la creazione di un oggetto di classe OOP.

Sintassi del costruttore predefinito in JavaScript

Class ClassName
costruttore()
// corpo del costruttore predefinito

Esempio: costruttore predefinito per le classi OOP in JavaScript

Nell'esempio seguente, definiremo un costruttore predefinito per "Persona" classe. Secondo la definizione di "costruttore()Metodo ", ogni volta che un"Persona"L'oggetto di classe viene creato, inizializzerà il suo"nome"Proprietà a"Alex", E "età"Proprietà come"25."

persona di classe
costructor ()
Questo.name = 'Alex';
Questo.età = 25;


const Person1 = new Person ();
console.Log ("Nome:" + Person1.nome);
console.Log ("Age:" + Person1.età);

L'esecuzione del programma dato creerà un "persona1”Oggetto del"Persona"Classe OOP utilizzando il costruttore predefinito. Il costruttore predefinito inizializzerà quindi le proprietà specificate per "persona1"Oggetto. Infine, il "console.tronco d'albero()"Il metodo stamperà i valori memorizzati in"persona1.nome" E "persona1.età" proprietà:

In una classe OOP, l'utilizzo del costruttore predefinito è utile quando si desidera inizializzare le proprietà di tutti gli oggetti creati con lo stesso valore. Ma cosa succede se devi assegnare alcuni valori unici all'oggetto durante la creazione? In JavaScript, puoi ottenere questa funzionalità con l'aiuto di "Costruttore parametrizzato".

Costruttore parametrizzato per le classi OOP in JavaScript

Un costruttore che comprende parametri è noto come "Costruttore parametrizzato". Questo tipo di costruttore viene utilizzato principalmente quando si desidera inizializzare le proprietà della classe OOP JavaScript con alcuni valori specifici.

Sintassi del costruttore parametrizzato in JavaScript

Class ClassName
costruttore (parametro1, parametro2…, parametro)
// corpo del costruttore parametrizzato

Il costruttore parametrizzato accetta i parametri passati come "argomenti"Durante la creazione di un oggetto di classe OOP.

Esempio: costruttore parametrizzato per le classi OOP in JavaScript

Creeremo un costruttore parametrizzato per "Persona"Classe che inizializza le proprietà con i valori passati come argomenti:

persona di classe
costruttore (nome, età)
Questo.nome = nome;
Questo.età = età;

Nel codice di seguito, "persona1”Oggetto del"Persona"La classe verrà creata utilizzando il costruttore parametrizzato dove"Max"È passato come"nome"Valore della proprietà e"25"L'argomento rappresenta il valore di"età" proprietà:

const Person1 = new Person ("max", 25);
console.Log ("Nome:" + Person1.nome);
console.Log ("Age:" + Person1.età);

Seguire l'output significa che abbiamo creato correttamente un "persona1"Oggetto con i valori delle proprietà specificati con l'aiuto del costruttore parametrizzato:

Abbiamo parlato della creazione di classi OOP, dei loro oggetti correlati e della definizione di costruttori predefiniti e parametrizzati. Ora andremo avanti e discuteremo di un altro componente critico di una classe OOP che è "Metodo".

Metodi nelle classi OOP in JavaScript

Metodi sono un tipo di funzione associata a specifiche classi OOP JavaScript. Operano anche come funzione membro se definita all'interno di una classe e possono essere utilizzati per accedere alle proprietà della classe.

Sintassi di metodi per le classi OOP in JavaScript

Class ClassName
MethodName
// corpo del nome metodo

Nota: Il nome di un metodo di classe OOP deve essere in minuscolo.

Esempio: metodi nelle classi OOP in JavaScript

Nello stesso "Persona"Classe, definiremo un"displayInfo ()"Metodo che restituisce i valori di"nome" E "età"Proprietà per un oggetto specificato:

DisplayInfo ()
return ("Nome:" + questo.nome + "età:" + questo.età);

Dopo averlo fatto, creeremo un oggetto di "Persona" classe:

const Person1 = new Person ("max", 25);

Successivamente, invoceremo il "displayInfo ()"Utilizzando il"persona1"Oggetto:

persona1.displayInfo ();

IL "displayInfo ()Il metodo "restituirà il"nome" E "età"Valori di"persona1"Oggetto:

Abbiamo compilato le informazioni essenziali relative alla classe OOP in JavaScript.

Conclusione

Usando il "classe"Parola chiave, puoi definire un Classe OOP In JavaScript. In ES6, le classi JavaScript sono state introdotte per aggiungere zucchero sintattico (un buon tipo di zucchero) sul modello di eredità del prototipo esistente. Simile a OOP, la classe JavaScript comprende un metodo del costruttore, alcune proprietà, metodi e oggetti specifici del tipo di classe dato. Questo articolo ha spiegato Classi OOP In JavaScript con l'aiuto di esempi adatti.