Lær hvordan du oppretter klasser i JavaScript

I 2015 ble ES6 -versjonen av JavaScript -programmeringsspråket utgitt. Denne utgivelsen introduserte noen store oppgraderinger av språket, og plasserte det offisielt i kategorien objektorientert programmeringsspråk blant andre språk som Java og C ++.

Objektorientert programmering fokuserer på objekter og operasjonene som kan utføres på dem. Imidlertid må du ha en klasse før du kan ha noen objekter.

JavaScript-klasser er en av de spillendrende funksjonene som fulgte med ES6-versjonen av språket. En klasse kan beskrives som en blåkopi som brukes til å lage objekter.

I denne opplæringsartikkelen lærer du hvordan du oppretter og manipulerer objekter ved hjelp av JavaScript -klasser.

JavaScript -klassestruktur

Når du oppretter en klasse i JavaScript, er det en grunnleggende komponent du alltid vil kreve - klasse søkeord. Nesten alle andre aspekter av JavaScript -klassen er ikke nødvendig for vellykket utførelse.

En JavaScript -klasse utføres naturlig hvis en konstruktør ikke er gitt (klassen vil ganske enkelt opprette en tom konstruktør under utførelsen). Hvis imidlertid en JavaScript -klasse opprettes med konstruktører og andre funksjoner, men det ikke brukes noe klassesøkeord, vil denne klassen ikke kunne kjøres.

De klasse søkeord (som alltid skal være med små bokstaver) er en nødvendighet i JavaScripts klassestruktur. Følgende eksempel er den generelle syntaksen til en JavaScript -klasse. JavaScript -klassesyntaksen er nedenfor:

klasse ClassName {
// klasse kropp
}

Opprette en klasse i JavaScript

I programmering kan en klasse sees på som en generalisert enhet som brukes til å lage et spesialisert objekt. For eksempel, i et skolemiljø kan en generalisert enhet (en klasse) være studenter, og et objekt for studenter kan være John Brown. Men før du lager et objekt må du kjenne dataene det vil lagre, og det er her JavaScript Constructors spiller inn.

Bruke konstruktører i JavaScript -klasser

En konstruktør er avgjørende for klasseopprettelsesprosessen på grunn av noen få årsaker; den initialiserer tilstanden til et objekt (gjennom dets attributter), og det kalles automatisk når et nytt objekt blir instantiert (definert og opprettet).

Bruke et konstruktøreksempel

Nedenfor ser du et konstruktøreksempel med en forklaring på hva det betyr.

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

Koden ovenfor presenterer et viktig aspekt av JavaScript -klassekonstruktøren; i motsetning til andre språk som Java og C ++, bruker ikke JavaScript -konstruktøren klassens navn til å lage en konstruktør. Den bruker konstruktør søkeord som du kan se i eksemplet ovenfor.

I slekt: Lær hvordan du oppretter klasser i Java

De konstruktør i eksemplet ovenfor tar tre parametere og bruker dette søkeord for å tilordne parametrene til den nåværende forekomsten av klassen. Det kan virke litt forvirrende, men det du trenger å forstå er at en klasse kan sees på som en plan som brukes til å lage mange hus.

Hvert konstruerte hus kan da sees på som et objekt i denne klassen. Selv om hvert av disse husene er skapt med samme tegning, kan de skille seg ut fra sin spesifikke geografiske beliggenhet eller menneskene som eier dem.

De dette søkeord brukes til å skille hvert objekt laget av en klasse. Den sikrer at de riktige dataene blir lagret og behandlet for hvert objekt som er opprettet med samme klasse.

Opprette et objekt i JavaScript

Konstruktører er viktige i et språk som JavaScript fordi de angir antall attributter et objekt i en bestemt klasse skal ha. Noen språk vil kreve at et attributt (variabel) deklareres før det kan brukes i en konstruktør eller andre metoder. Dette er imidlertid ikke tilfellet med JavaScript.

I slekt: Hvordan deklarere variabler i JavaScript

Når du ser på elevklassens konstruktør ovenfor, kan du se at et objekt i denne klassen vil ha tre attributter.

Opprette et objekteksempel

Nedenfor ser du et eksempel på hvordan du oppretter et objekt i JavaScript.

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

Koden ovenfor bruker Student klasse for å lage et objekt.

Når du oppretter et objekt i en klasse, må du bruke ny søkeord, etterfulgt av klassens navn og verdiene du vil tilordne de respektive attributtene. Nå har du en ny student med fornavnet John, etternavnet Brown og en startdato for 2018. Du har også en konstant variabel: john. Denne variabelen er viktig fordi den lar deg bruke objektet som er opprettet.

Uten john variabel vil du fortsatt kunne lage et nytt objekt ved hjelp av Student klasse, men da vil det ikke være noen måte å få tilgang til dette objektet og bruke det med de forskjellige metodene i klassen.

Bruke metoder i JavaScript -klasser

En metode er en funksjon av en klasse som brukes til å utføre operasjoner på objekter som er opprettet fra klassen. En god metode å legge til i studentklassen er en som genererer en rapport om hver elev.

Eksempel på opprettelse av klassemetoder

Nedenfor er et eksempel for å lage klassemetoder i JavaScript.

klasse Student {
constructor (fornavn, etternavn, startdato) {
this.firstName = fornavn;
this.lastName = etternavn;
this.startDate = startDate;
}
// rapportmetode
rapportere(){
returner `$ {this.firstName} $ {this.lastName} begynte på denne institusjonen i $ {this.startDate}`
}
}

Klassen ovenfor inneholder en metode som vil generere en rapport om hver elev som er opprettet med Student klasse. For å bruke rapportere() metode må du bruke et eksisterende objekt i klassen for å foreta et enkelt funksjonsanrop.

Takket være "opprett et objekteksempel" ovenfor, bør du ha et objekt av Student klasse som er tilordnet variabelen john. Ved hjelp av john, kan du nå ringe rapportere() metode.

Eksempel på bruk av klassemetoder

Nedenfor er et eksempel på bruk av klassemetoder i JavaScript.

// lage et nytt objekt
const john = ny student ('John', 'Brown', '2018');
// ringe rapportmetoden og lagre resultatet i en variabel
la resultat = john.report ();
// skrive ut resultatet til konsollen
console.log (resultat);

Koden ovenfor bruker Studenter klasse for å produsere følgende utdata i konsollen:

John Brown begynte å gå på denne institusjonen i 2018

Bruke statiske metoder i JavaScript -klasser

Statiske metoder er unike fordi de er de eneste metodene i en JavaScript -klasse som kan brukes uten et objekt.

Fra eksemplet ovenfor kan du ikke bruke rapportere() metode uten et objekt i klassen. Dette er fordi rapportere() metoden er avhengig av attributtene til et objekt for å gi et ønskelig resultat. For å bruke en statisk metode trenger du imidlertid bare navnet på klassen som lagrer metoden.

Opprette et eksempel på statisk metode

Nedenfor er et statisk metodeeksempel for JavaScript.

klasse Student {
constructor (fornavn, etternavn, startdato) {
this.firstName = fornavn;
this.lastName = etternavn;
this.startDate = startDate;
}
// rapportmetode
rapportere(){
returner `$ {this.firstName} $ {this.lastName} begynte på denne institusjonen i $ {this.startDate}`
}
// statisk metode
statisk endDate (startDate) {
return startDate + 4;
}
}

Det viktige å merke seg fra eksemplet ovenfor er at hver statisk metode begynner med statisk søkeord.

Bruke et eksempel på statisk metode

Nedenfor er et eksempel på bruk av en statisk metode i JavaScript.

// ringe en statisk metode og skrive ut resultatet til konsollen
console.log (Student.endDate (2018));

Kodelinjen ovenfor bruker Studenter klasse for å produsere følgende utdata i konsollen:

2022

Det er enkelt å lage en JavaScript -klasse

Det er flere ting du må huske hvis du vil opprette en JavaScript -klasse og instantiere ett eller flere objekter fra den:

• En JavaScript -klasse må ha klasse søkeord.
• En JavaScript -konstruktør angir antall verdier et objekt kan ha.
• Generelle klassemetoder kan ikke brukes uten et objekt.
• Statiske metoder kan brukes uten objekt.

De konsoll.Logg() metoden brukes i hele denne artikkelen for å gi resultatene av bruk av både de generelle og statiske metodene i en JavaScript -klasse. Denne metoden er et nyttig verktøy for enhver JavaScript -utvikler, siden den hjelper i feilsøkingsprosessen.

Gjør deg kjent med console.log () metode er en av de viktigste tingene du kan gjøre som JavaScript -utvikler.

Det ultimate JavaScript -juksearket

Få en rask oppdatering av JavaScript -elementer med dette juksearket.

Les neste

Om forfatteren