Lær, hvordan du opretter klasser i JavaScript

I 2015 blev ES6 -versionen af ​​JavaScript -programmeringssproget frigivet. Denne udgivelse introducerede nogle større opgraderinger til sproget og placerede det officielt i kategorien objektorienteret programmeringssprog blandt andre sprog som Java og C ++.

Objektorienteret programmering fokuserer på objekter og de operationer, der kan udføres på dem. Men før du kan have objekter, skal du have en klasse.

JavaScript-klasser er en af ​​de spilændrende funktioner, der fulgte med ES6-versionen af ​​sproget. En klasse kan beskrives som en blueprint, der bruges til at oprette objekter.

I denne selvstudie lærer du, hvordan du opretter og manipulerer objekter ved hjælp af JavaScript -klasser.

JavaScript -klassestruktur

Når du opretter en klasse i JavaScript, er der en grundlæggende komponent, som du altid vil kræve - the klasse nøgleord. Næsten alle andre aspekter af JavaScript -klassen er ikke påkrævet for en vellykket udførelse.

En JavaScript -klasse udføres naturligt, hvis der ikke leveres en konstruktør (klassen opretter simpelthen en tom konstruktør under udførelsen). Hvis der imidlertid oprettes en JavaScript -klasse med konstruktører og andre funktioner, men der ikke bruges et klassesøgeord, kan denne klasse ikke eksekveres.

Det klasse søgeord (som altid skal være med små bogstaver) er en nødvendighed i JavaScripts klassestruktur. Følgende eksempel er den generelle syntaks for en JavaScript -klasse. JavaScript -klassen syntaks er nedenfor:

klasse ClassName {
// klasse krop
}

Oprettelse af en klasse i JavaScript

I programmering kan en klasse ses som en generaliseret enhed, der bruges til at oprette et specialiseret objekt. For eksempel i et skolemiljø kan en generaliseret enhed (en klasse) være elever, og et objekt for elever kan være John Brown. Men før du opretter et objekt, skal du kende de data, det vil gemme, og det er her, JavaScript Constructors spiller ind.

Brug af konstruktører i JavaScript -klasser

En konstruktør er afgørende for klasseoprettelsesprocessen på grund af et par grunde; det initialiserer et objekts tilstand (gennem dets attributter), og det kaldes automatisk, når et nyt objekt instantieres (defineres og oprettes).

Brug af et konstruktøreksempel

Nedenfor ser du et konstruktøreksempel med en forklaring på, hvad det betyder.

klasse elev {
constructor (fornavn, efternavn, startdato) {
this.firstName = fornavn;
this.lastName = efternavn;
this.startDate = startDate;
}
}

Ovenstående kode præsenterer et vigtigt aspekt af JavaScript -klassekonstruktøren; i modsætning til andre sprog som Java og C ++, bruger en JavaScript -konstruktør ikke klassens navn til at oprette en konstruktør. Den bruger konstruktør søgeord, som du kan se i eksemplet ovenfor.

Relaterede: Lær, hvordan du opretter klasser i Java

Det konstruktør i eksemplet ovenfor tager tre parametre og bruger dette nøgleord for at tildele parametrene til den aktuelle forekomst af klassen. Det kan virke lidt forvirrende, men hvad du skal forstå er, at en klasse kan ses som en plan, der bruges til at oprette mange huse.

Hvert konstruerede hus kan derefter ses som et objekt i denne klasse. Selvom hvert af disse huse er skabt med den samme plan, kan de skelnes ved deres specifikke geografiske placering eller de mennesker, der ejer dem.

Det dette søgeord bruges til at skelne mellem hvert objekt, der er oprettet af en klasse. Det sikrer, at de korrekte data gemmes og behandles for hvert objekt, der oprettes ved hjælp af den samme klasse.

Oprettelse af et objekt i JavaScript

Konstruktører er vigtige i et sprog som JavaScript, fordi de angiver det antal attributter, et objekt i en bestemt klasse skal have. Nogle sprog kræver, at en attribut (variabel) deklareres, før den kan bruges i en konstruktør eller andre metoder. Dette er imidlertid ikke tilfældet med JavaScript.

Relaterede: Sådan erklæres variabler i JavaScript

Når man ser på elevklassens konstruktør ovenfor, kan man se, at et objekt i denne klasse vil have tre attributter.

Oprettelse af et objekteksempel

Nedenfor ser du et eksempel til oprettelse af et objekt i JavaScript.

// opret et nyt objekt
const john = ny elev ('John', 'Brown', '2018');

Ovenstående kode bruger Studerende klasse for at oprette et objekt.

Når du opretter et objekt i en klasse, skal du bruge ny nøgleord, efterfulgt af klassens navn og de værdier, du vil tildele de respektive attributter. Nu har du en ny elev med fornavnet John, efternavnet Brown og en startdato for 2018. Du har også en konstant variabel: John. Denne variabel er vigtig, fordi den giver dig mulighed for at bruge det objekt, der er oprettet.

Uden John variabel vil du stadig kunne oprette et nyt objekt ved hjælp af Studerende klasse, men så er der ingen måde at få adgang til dette objekt og bruge det med klassens forskellige metoder.

Brug af metoder i JavaScript -klasser

En metode er en funktion af en klasse, der bruges til at udføre operationer på objekter, der er oprettet fra klassen. En god metode til at føje til elevklassen er en, der genererer en rapport om hver elev.

Oprettelse af klassemetoder Eksempel

Nedenfor er et eksempel til oprettelse af klassemetoder i JavaScript.

klasse elev {
constructor (fornavn, efternavn, startdato) {
this.firstName = fornavn;
this.lastName = efternavn;
this.startDate = startDate;
}
// rapportmetode
rapport(){
return `$ {this.firstName} $ {this.lastName} begyndte at deltage i denne institution i $ {this.startDate}`
}
}

Klassen ovenfor indeholder en metode, der genererer en rapport om hver elev, der er oprettet med Studerende klasse. At bruge rapport() metode skal du bruge et eksisterende objekt i klassen til at foretage et simpelt funktionsopkald.

Takket være "opret et objekteksempel" ovenfor, skal du have et objekt med Studerende klasse, der er tildelt variablen John. Ved brug af John, kan du nu med succes ringe til rapport() metode.

Eksempel på klassemetoder

Nedenfor er et eksempel på brug af klassemetoder i JavaScript.

// opret et nyt objekt
const john = ny elev ('John', 'Brown', '2018');
// kalde rapportmetoden og gemme dens resultat i en variabel
lad resultat = john.report ();
// udskrivning af resultatet til konsollen
console.log (resultat);

Ovenstående kode bruger Studerende klasse for at producere følgende output i konsollen:

John Brown begyndte at deltage i denne institution i 2018

Brug af statiske metoder i JavaScript -klasser

Statiske metoder er unikke, fordi de er de eneste metoder i en JavaScript -klasse, der kan bruges uden et objekt.

Fra eksemplet ovenfor kan du ikke bruge rapport() metode uden et objekt i klassen. Dette er fordi rapport() metode er afhængig af et objekts attributter for at producere et ønskeligt resultat. For at bruge en statisk metode skal du dog kun bruge navnet på den klasse, der gemmer metoden.

Oprettelse af et eksempel på statisk metode

Nedenfor er et eksempel på en statisk metode til JavaScript.

klasse elev {
constructor (fornavn, efternavn, startdato) {
this.firstName = fornavn;
this.lastName = efternavn;
this.startDate = startDate;
}
// rapportmetode
rapport(){
return `$ {this.firstName} $ {this.lastName} begyndte at deltage i denne institution i $ {this.startDate}`
}
// statisk metode
statisk endDate (startDate) {
return startDate + 4;
}
}

Det vigtige at bemærke fra eksemplet ovenfor er, at hver statisk metode begynder med statisk nøgleord.

Brug af et statisk metodeeksempel

Nedenfor er et eksempel på brug af en statisk metode i JavaScript.

// kalder en statisk metode og udskriver dens resultat til konsollen
console.log (Student.endDate (2018));

Kodelinjen ovenfor bruger Studerende klasse for at producere følgende output i konsollen:

2022

Det er let at oprette en JavaScript -klasse

Der er flere ting, du skal huske, hvis du vil oprette en JavaScript -klasse og instantiere et eller flere objekter fra den:

• En JavaScript -klasse skal have klasse nøgleord.
• En JavaScript -konstruktør angiver antallet af værdier, et objekt kan have.
• Generelle klassemetoder kan ikke bruges uden et objekt.
• Statiske metoder kan bruges uden et objekt.

Det konsol.log () metode bruges i hele denne artikel til at give resultaterne af brug af både de generelle og statiske metoder i en JavaScript -klasse. Denne metode er et nyttigt værktøj til enhver JavaScript -udvikler, da den hjælper med fejlfindingsprocessen.

Gør dig bekendt med console.log () metode er en af ​​de vigtigste ting, du kan gøre som JavaScript -udvikler.

Det ultimative JavaScript Cheat Sheet

Få en hurtig opdatering af JavaScript -elementer med dette snydeblad.

Læs Næste

Om forfatteren