Lär dig hur du skapar klasser i JavaScript

2015 släpptes ES6 -versionen av programmeringsspråket JavaScript. Denna version introducerade några stora uppgraderingar av språket och placerade det officiellt i kategorin objektorienterat programmeringsspråk bland andra språk som Java och C ++.

Objektorienterad programmering fokuserar på objekt och de operationer som kan utföras på dem. Men innan du kan ha några objekt måste du ha en klass.

JavaScript-klasser är en av de speländrande funktionerna som följde med ES6-versionen av språket. En klass kan beskrivas som en ritning som används för att skapa objekt.

I den här självstudie -artikeln lär du dig hur du skapar och manipulerar objekt med hjälp av JavaScript -klasser.

JavaScript -klassstruktur

När du skapar en klass i JavaScript finns det en grundläggande komponent som du alltid kommer att behöva - klass nyckelord. Nästan alla andra aspekter av JavaScript -klassen krävs inte för att det ska lyckas.

En JavaScript -klass körs naturligt om en konstruktör inte tillhandahålls (klassen skapar helt enkelt en tom konstruktör under körningen). Men om en JavaScript -klass skapas med konstruktörer och andra funktioner men inget klassord används, kommer denna klass inte att köras.

De klass nyckelord (som alltid ska vara gemener) är en nödvändighet i JavaScript klassstruktur. Följande exempel är den allmänna syntaxen för en JavaScript -klass. JavaScript -klassens syntax finns nedan:

klass ClassName {
// klass kropp
}

Skapa en klass i JavaScript

I programmering kan en klass ses som en generaliserad enhet som används för att skapa ett specialiserat objekt. Till exempel, i en skolmiljö kan en generaliserad enhet (en klass) vara studenter och ett objekt för elever kan vara John Brown. Men innan du skapar ett objekt måste du känna till data som det kommer att lagra och det är här JavaScript Constructors spelar in.

Använda konstruktörer i JavaScript -klasser

En konstruktör är avgörande för klassskapandeprocessen på grund av några skäl; det initierar tillståndet för ett objekt (genom dess attribut) och det kallas automatiskt när ett nytt objekt instantieras (definieras och skapas).

Använda ett konstruktörsexempel

Nedan ser du ett konstruktörsexempel med en förklaring av vad det betyder.

klass Student {
constructor (förnamn, efternamn, startdatum) {
this.firstName = förnamn;
this.lastName = efternamn;
this.startDate = startDate;
}
}

Koden ovan presenterar en viktig aspekt av JavaScript -klasskonstruktorn; till skillnad från andra språk som Java och C ++, använder en JavaScript -konstruktör inte klassnamnet för att skapa en konstruktör. Den använder konstruktör nyckelord som du kan se i exemplet ovan.

Relaterad: Lär dig hur du skapar klasser i Java

De konstruktör i exemplet ovan tar tre parametrar och använder detta nyckelord för att tilldela parametrarna till den aktuella förekomsten av klassen. Det kan tyckas lite förvirrande, men det du behöver förstå är att en klass kan ses som en ritning som används för att skapa många hus.

Varje byggt hus kan sedan ses som ett objekt i denna klass. Även om var och en av dessa hus är skapade med samma ritning, skiljer de sig genom deras specifika geografiska läge eller människorna som äger dem.

De detta nyckelord används för att skilja varje objekt som skapats av en klass. Det säkerställer att rätt data lagras och bearbetas för varje objekt som skapas med samma klass.

Skapa ett objekt i JavaScript

Konstruktörer är viktiga i ett språk som JavaScript eftersom de anger antalet attribut som ett objekt i en specifik klass ska ha. Vissa språk kräver att ett attribut (variabel) deklareras innan det kan användas i en konstruktör eller andra metoder. Detta är dock inte fallet med JavaScript.

Relaterad: Hur deklareras variabler i JavaScript

Om du tittar på elevklasskonstruktören ovan kan du se att ett objekt i denna klass kommer att ha tre attribut.

Skapa ett objektexempel

Nedan ser du ett exempel för att skapa ett objekt i JavaScript.

// skapa ett nytt objekt
const john = ny student ('John', 'Brown', '2018');

Koden ovan använder Studerande klass för att skapa ett objekt.

När du skapar ett objekt i en klass måste du använda ny sökord, följt av klassnamnet och de värden som du vill tilldela respektive attribut. Nu har du en ny student med förnamnet John, efternamnet Brown och ett startdatum 2018. Du har också en konstant variabel: john. Denna variabel är viktig eftersom den låter dig använda objektet som skapas.

Utan john variabel kommer du fortfarande att kunna skapa ett nytt objekt med Studerande klass, men då kommer det inte finnas något sätt att komma åt detta objekt och använda det med klassens olika metoder.

Använda metoder i JavaScript -klasser

En metod är en funktion av en klass som används för att utföra operationer på objekt som skapas från klassen. En bra metod att lägga till i studentklassen är en som genererar en rapport om varje elev.

Skapa exempel på klassmetoder

Nedan finns ett exempel för att skapa klassmetoder i JavaScript.

klass Student {
constructor (förnamn, efternamn, startdatum) {
this.firstName = förnamn;
this.lastName = efternamn;
this.startDate = startDate;
}
// rapportmetod
Rapportera(){
return `$ {this.firstName} $ {this.lastName} började gå på denna institution i $ {this.startDate}`
}
}

Klassen ovan innehåller en metod som genererar en rapport om varje elev som skapats med Studerande klass. Att använda Rapportera() metod måste du använda ett befintligt objekt i klassen för att ringa ett enkelt funktionsanrop.

Tack vare "skapa ett objekt -exempel" ovan bör du ha ett objekt av Studerande klass som tilldelas variabeln john. Använder sig av john, kan du nu ringa Rapportera() metod.

Använda exempel på klassmetoder

Nedan följer ett exempel på hur du använder klassmetoder i JavaScript.

// skapa ett nytt objekt
const john = ny student ('John', 'Brown', '2018');
// kalla rapportmetoden och lagra dess resultat i en variabel
låt resultat = john.report ();
// skriva ut resultatet till konsolen
console.log (resultat);

Koden ovan använder Studenter klass för att producera följande utdata i konsolen:

John Brown började gå på denna institution 2018

Använda statiska metoder i JavaScript -klasser

Statiska metoder är unika eftersom de är de enda metoderna i en JavaScript -klass som kan användas utan ett objekt.

Från exemplet ovan kan du inte använda Rapportera() metod utan ett objekt av klassen. Detta beror på att Rapportera() metoden bygger på attributen för ett objekt för att ge ett önskvärt resultat. Men för att använda en statisk metod behöver du bara namnet på klassen som lagrar metoden.

Skapa ett exempel på statisk metod

Nedan följer ett exempel på statisk metod för JavaScript.

klass Student {
constructor (förnamn, efternamn, startdatum) {
this.firstName = förnamn;
this.lastName = efternamn;
this.startDate = startDate;
}
// rapportmetod
Rapportera(){
return `$ {this.firstName} $ {this.lastName} började gå på denna institution i $ {this.startDate}`
}
// statisk metod
statisk endDate (startDate) {
return startDate + 4;
}
}

Det viktiga att notera från exemplet ovan är att varje statisk metod börjar med statisk nyckelord.

Använda ett exempel på statisk metod

Nedan finns ett exempel för att använda en statisk metod i JavaScript.

// ringa en statisk metod och skriva ut dess resultat till konsolen
console.log (Student.endDate (2018));

Kodraden ovan använder Studenter klass för att producera följande utdata i konsolen:

2022

Det är enkelt att skapa en JavaScript -klass

Det finns flera saker du måste komma ihåg om du vill skapa en JavaScript -klass och instantiera ett eller flera objekt från den:

• En JavaScript -klass måste ha klass nyckelord.
• En JavaScript -konstruktör anger antalet värden ett objekt kan ha.
• Allmänna klassmetoder kan inte användas utan ett objekt.
• Statiska metoder kan användas utan ett objekt.

De trösta.logga() metoden används i hela denna artikel för att ge resultaten av att använda både de allmänna och statiska metoderna i en JavaScript -klass. Denna metod är ett användbart verktyg för alla JavaScript -utvecklare eftersom det hjälper till i felsökningen.

Bekanta dig med console.log () metod är en av de viktigaste sakerna du kan göra som JavaScript -utvecklare.

Det ultimata JavaScript -fuskbladet

Få en snabb uppdatering av JavaScript -element med detta fuskblad.

Läs Nästa

Om författaren