Scopri come creare classi in JavaScript

Nel 2015 è stata rilasciata la versione ES6 del linguaggio di programmazione JavaScript. Questa versione ha introdotto alcuni importanti aggiornamenti al linguaggio e lo ha ufficialmente inserito nella categoria del linguaggio di programmazione orientato agli oggetti tra altri linguaggi come Java e C++.

La programmazione orientata agli oggetti si concentra sugli oggetti e sulle operazioni che possono essere eseguite su di essi. Tuttavia, prima di poter avere qualsiasi oggetto dovrai avere una classe.

Le classi JavaScript sono una delle funzionalità rivoluzionarie fornite con la versione ES6 del linguaggio. Una classe può essere descritta come un progetto utilizzato per creare oggetti.

In questo articolo del tutorial imparerai come creare e manipolare oggetti utilizzando le classi JavaScript.

Struttura della classe JavaScript

Quando crei una classe in JavaScript c'è un componente fondamentale che ti servirà sempre: il classe parola chiave. Quasi tutti gli altri aspetti della classe JavaScript non sono necessari per la sua corretta esecuzione.

Una classe JavaScript verrà eseguita naturalmente se non viene fornito un costruttore (la classe creerà semplicemente un costruttore vuoto durante l'esecuzione). Tuttavia, se viene creata una classe JavaScript con costruttori e altre funzioni ma non viene utilizzata alcuna parola chiave di classe, questa classe non sarà eseguibile.

Il classe la parola chiave (che dovrebbe essere sempre in minuscolo) è una necessità nella struttura delle classi di JavaScript. L'esempio seguente è la sintassi generale di una classe JavaScript. La sintassi della classe JavaScript è la seguente:

class NomeClasse{
//corpo della classe
}

Creare una classe in JavaScript

Nella programmazione, una classe può essere vista come un'entità generalizzata utilizzata per creare un oggetto specializzato. Ad esempio, in un ambiente scolastico, un'entità generalizzata (una classe) può essere studenti e un oggetto di studenti può essere John Brown. Ma prima di creare un oggetto dovrai conoscere i dati che memorizzerà ed è qui che entrano in gioco i costruttori JavaScript.

Utilizzo di costruttori nelle classi JavaScript

Un costruttore è vitale per il processo di creazione della classe per alcuni motivi; inizializza lo stato di un oggetto (tramite i suoi attributi) e viene chiamato automaticamente quando viene istanziato (definito e creato) un nuovo oggetto.

Utilizzo di un esempio di costruttore

Di seguito, vedrai un esempio di costruttore con una spiegazione di cosa significa.

classe studente{
costruttore (firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = cognome;
this.startDate = startDate;
}
}

Il codice sopra presenta un aspetto importante del costruttore di classi JavaScript; a differenza di altri linguaggi come Java e C++, un costruttore di JavaScript non usa il nome della classe per creare un costruttore. Usa il costruttore parola chiave come puoi vedere nell'esempio sopra.

Relazionato: Impara come creare classi in Java

Il costruttore nell'esempio sopra prende tre parametri e usa il questo parola chiave per assegnare i parametri all'istanza corrente della classe. Potrebbe sembrare un po' confuso, ma quello che devi capire è che una classe può essere vista come un progetto che viene utilizzato per creare molte case.

Ogni casa costruita può quindi essere vista come un oggetto di questa classe. Sebbene ognuna di queste case sia creata con lo stesso progetto, sono distinguibili dalla loro specifica posizione geografica o dalle persone che le possiedono.

Il questo la parola chiave viene utilizzata per distinguere ogni oggetto creato da una classe. Assicura che i dati corretti vengano archiviati ed elaborati per ogni oggetto creato utilizzando la stessa classe.

Creazione di un oggetto in JavaScript

I costruttori sono importanti in un linguaggio come JavaScript perché indicano il numero di attributi che dovrebbe avere un oggetto di una classe specifica. Alcuni linguaggi richiederanno la dichiarazione di un attributo (variabile) prima che possa essere utilizzato in un costruttore o in qualsiasi altro metodo. Tuttavia, questo non è il caso di JavaScript.

Relazionato: Come dichiarare le variabili in JavaScript

Guardando il costruttore della classe studente sopra, puoi discernere che un oggetto di questa classe avrà tre attributi.

Creazione di un oggetto Esempio

Di seguito, vedrai un esempio per la creazione di un oggetto in JavaScript.

//crea un nuovo oggetto
const john = new Student('John', 'Brown', '2018');

Il codice sopra usa il Alunno classe per creare un oggetto.

Quando si crea un oggetto di una classe, è necessario utilizzare il nuovo parola chiave, seguita dal nome della classe e dai valori che si desidera assegnare ai rispettivi attributi. Ora hai un nuovo studente con il nome John, il cognome Brown e una data di inizio del 2018. Hai anche una variabile costante: John. Questa variabile è importante perché consente di utilizzare l'oggetto che viene creato.

Senza il John variabile sarai comunque in grado di creare un nuovo oggetto usando il Alunno class, ma non ci sarà modo di accedere a questo oggetto e usarlo con i diversi metodi della classe.

Utilizzo dei metodi nelle classi JavaScript

Un metodo è una funzione di una classe utilizzata per eseguire operazioni su oggetti creati dalla classe. Un buon metodo da aggiungere alla classe degli studenti è quello che genera un rapporto su ogni studente.

Esempio di creazione di metodi di classe

Di seguito è riportato un esempio per la creazione di metodi di classe in JavaScript.

classe studente{
costruttore (firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = cognome;
this.startDate = startDate;
}
// metodo di rapporto
rapporto(){
return `${this.firstName} ${this.lastName} ha iniziato a frequentare questo istituto in ${this.startDate}`
}
}

La classe sopra contiene un metodo che genererà un report su ogni studente creato con il Alunno classe. Per usare il rapporto() sarà necessario utilizzare un oggetto esistente della classe per effettuare una semplice chiamata di funzione.

Grazie all'esempio "crea un oggetto" sopra, dovresti avere un oggetto del Alunno classe assegnata alla variabile John. Usando John, ora puoi chiamare con successo il rapporto() metodo.

Utilizzo dei metodi di classe Esempio

Di seguito è riportato un esempio di utilizzo dei metodi di classe in JavaScript.

//crea un nuovo oggetto
const john = new Student('John', 'Brown', '2018');
//chiama il metodo report e memorizza il suo risultato in una variabile
let risultato = giovanni.report();
//stampa il risultato sulla console
console.log (risultato);

Il codice sopra usa il Studenti class per produrre il seguente output nella console:

John Brown ha iniziato a frequentare questa istituzione nel 2018

Utilizzo di metodi statici nelle classi JavaScript

I metodi statici sono unici perché sono gli unici metodi in una classe JavaScript che possono essere utilizzati senza un oggetto.

Dall'esempio sopra, non puoi usare il rapporto() metodo senza un oggetto della classe. Questo perché il rapporto() Il metodo si basa sugli attributi di un oggetto per produrre un risultato desiderabile. Tuttavia, per utilizzare un metodo statico, è necessario solo il nome della classe che memorizza il metodo.

Creazione di un esempio di metodo statico

Di seguito è riportato un esempio di metodo statico per JavaScript.

classe studente{
costruttore (firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = cognome;
this.startDate = startDate;
}
// metodo di rapporto
rapporto(){
return `${this.firstName} ${this.lastName} ha iniziato a frequentare questo istituto in ${this.startDate}`
}
//metodo statico
static endDate (startDate){
ritorno DataInizio + 4;
}
}

La cosa importante da notare dall'esempio sopra è che ogni metodo statico inizia con il statico parola chiave.

Utilizzo di un esempio di metodo statico

Di seguito è riportato un esempio per l'utilizzo di un metodo statico in JavaScript.

//chiama un metodo statico e stampa il suo risultato sulla console
console.log (Student.endDate (2018));

La riga di codice sopra usa il Studenti class per produrre il seguente output nella console:

2022

Creare una classe JavaScript è facile

Ci sono diverse cose che devi ricordare se vuoi creare una classe JavaScript e creare un'istanza di uno o più oggetti da essa:

• Una classe JavaScript deve avere il classe parola chiave.
• Un costruttore JavaScript indica il numero di valori che un oggetto può avere.
• I metodi di classe generali non possono essere utilizzati senza un oggetto.
• I metodi statici possono essere utilizzati senza un oggetto.

Il console.tronco d'albero() Il metodo viene utilizzato in questo articolo per fornire i risultati dell'utilizzo di entrambi i metodi generali e statici in una classe JavaScript. Questo metodo è uno strumento utile per qualsiasi sviluppatore JavaScript in quanto aiuta nel processo di debug.

Familiarizzare con il console.log() è una delle cose più importanti che puoi fare come sviluppatore JavaScript.

Il Cheat Sheet di JavaScript definitivo

Ottieni un rapido aggiornamento sugli elementi JavaScript con questo cheat sheet.

Leggi Avanti

Circa l'autore