Lär dig hur du skapar klasser i JavaScript

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.



hur man överför ångsparar filer till en annan dator

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älvstudieartikeln 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 framgångsrikt utförande.



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 med små bokstäver) är en nödvändighet i JavaScript klassstruktur. Följande exempel är den allmänna syntaxen för en JavaScript -klass. JavaScript -klassens syntax ä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 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.

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 en JavaScript -konstruktör inte klassnamnet för att skapa en konstruktör. Den använder byggare nyckelord som du kan se i exemplet ovan.

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

De byggare 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 de människor 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 bör 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.

Relaterat: 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.

//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 sökord, 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 kan du fortfarande skapa ett nytt objekt med Studerande klass, men då kommer det inte 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 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.

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 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 exemplet skapa ett objekt ovan bör du ha ett objekt av Studerande klass som tilldelas variabeln john . Använder sig av john , kan du nu framgångsrikt ringa Rapportera() metod.

Exempel på klassmetoder

Nedan är ett exempel på hur du 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 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.

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 ett exempel på statisk metod

Nedan finns ett exempel för att använda 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 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() metod 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.

Dela med sig Dela med sig Tweet E-post Det ultimata JavaScript -fuskbladet

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

Läs Nästa Relaterade ämnen
  • Programmering
  • Programmering
  • JavaScript
  • Kodningstips
  • Handledning för kodning
Om författaren Kadeisha Kean(21 artiklar publicerade)

Kadeisha Kean är en fullstack mjukvaruutvecklare och teknisk/teknikförfattare. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska begreppen; producerar material som lätt kan förstås av någon nybörjare inom teknik. Hon brinner för att skriva, utveckla intressant programvara och 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, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera