2015 släpptes ES6-versionen av programmeringsspråket JavaScript. Den här utgåvan introducerade några större 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 spelförä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älvstudieartikeln får du lära 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 – den klass nyckelord. Nästan alla andra aspekter av JavaScript-klassen krävs inte för att den ska kunna köras framgångsrikt.
En JavaScript-klass kommer att köras naturligt om en konstruktor inte tillhandahålls (klassen kommer helt enkelt att skapa en tom konstruktor under körningen). Men om en JavaScript-klass skapas med konstruktorer och andra funktioner men inget klassnyckelord används, kommer denna klass inte att vara körbar.
De klass nyckelord (som alltid ska vara med gemener) är en nödvändighet i JavaScripts klassstruktur. Följande exempel är den allmänna syntaxen för en JavaScript-klass. JavaScript-klasssyntaxen är nedan:
class ClassName{
//class body
}
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 elever och ett objekt för elever kan vara John Brown. Men innan du skapar ett objekt måste du veta vilken data det kommer att lagra och det är här JavaScript-konstruktörer kommer in i bilden.
Använda konstruktörer i JavaScript-klasser
En konstruktör är avgörande för klassskapandeprocessen på grund av några anledningar; den initierar tillståndet för ett objekt (genom dess attribut) och det anropas automatiskt när ett nytt objekt instansieras (definieras och skapas).
Använda ett konstruktörsexempel
Nedan ser du ett konstruktorexempel med en förklaring av vad det betyder.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
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 inte en JavaScript-konstruktör klassnamnet för att skapa en konstruktör. Den använder konstruktör nyckelord som du kan se i exemplet ovan.
De konstruktör i exemplet ovan tar tre parametrar och använder detta nyckelord för att tilldela parametrarna till den aktuella instansen av klassen. Det kan verka lite förvirrande, men vad 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 då ses som ett objekt i denna klass. Även om vart och ett av dessa hus är skapade med samma ritning, kan de särskiljas genom sin specifika geografiska plats eller människorna som äger dem.
De detta nyckelord används för att särskilja 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 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 konstruktor eller någon annan metod. Detta är dock inte fallet med JavaScript.
Om du tittar på elevklasskonstruktören ovan kan du urskilja 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.
//create a new object
const john = new 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 nyckelord, följt av klassnamnet och de värden som du vill tilldela respektive attribut. Nu har du en ny elev 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 hjälp av Studerande klass, men då kommer det inte att finnas något sätt att komma åt det här objektet 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 elevklassen är en som genererar en rapport om varje elev.
Exempel på att skapa klassmetoder
Nedan är ett exempel för att skapa klassmetoder i JavaScript.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}
Klassen ovan innehåller en metod som kommer att generera en rapport om varje elev som skapas med Studerande klass. Att använda Rapportera() metod måste du använda ett befintligt objekt i klassen för att göra 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 framgångsrikt anropa Rapportera() metod.
Använda klassmetoder Exempel
Nedan är ett exempel på hur man använder klassmetoder i JavaScript.
//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);
Koden ovan använder Studenter klass för att producera följande utdata i konsolen:
John Brown started attending this institution in 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 objekt i klassen. Detta beror på att Rapportera() Metoden förlitar sig på ett objekts attribut 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 statiskt metodexempel
Nedan finns ett statiskt metodexempel för JavaScript.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static 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 en statisk metod Exempel
Nedan är ett exempel på hur du använder en statisk metod i JavaScript.
//calling a static method and printing its result to the console
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 behöver komma ihåg om du vill skapa en JavaScript-klass och instansiera ett eller flera objekt från den:
En JavaScript-klass måste ha klass nyckelord. En JavaScript-konstruktor 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() metod används i hela den här artikeln 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ökningsprocessen.
Bekanta dig med console.log() metod är en av de viktigaste sakerna du kan göra som JavaScript-utvecklare.
Om författaren
Kadeisha Kean (39 artiklar publicerade)
Kadeisha Kean är en full-stack mjukvaruutvecklare och teknisk/teknikskribent. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska koncepten; producera material som lätt kan förstås av alla nybörjare. Hon brinner för att skriva, utveckla intressant programvara och att resa runt i världen (genom dokumentärer).
Mer från Kadeisha Kean
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
