JavaScript er et fleksibelt programmeringsspråk som støtter flere programmeringsparadigmer, inkludert funksjonell, objektorientert og imperativ programmering.
Klasser er sentrale i objektorientert programmering i JavaScript. Denne artikkelen vil derfor gi en grundig innføring i hva JavaScript-klasser er og hvordan de brukes.
Hva er klasser i JavaScript?
Innen objektorientert programmering modelleres systemer ved hjelp av objekter som kommuniserer med hverandre. Objekter inneholder data i form av egenskaper og utfører handlinger definert som metoder. En klasse fungerer som en mal for å definere hvilke egenskaper og metoder objekter av en bestemt type skal ha. Dermed er klasser tegninger eller skisser for objekter.
Viktige begreper knyttet til klasser
For å sikre en felles forståelse, vil vi her definere noen nøkkelbegreper som brukes i forbindelse med klasser. Hvis du allerede er kjent med objektorientert programmering, kan du hoppe over dette avsnittet.
❇️ En klasse er en mal eller en blåkopi for å opprette objekter. Den definerer strukturen og oppførselen til objekter av den typen. Det å lage et objekt fra en klasse kalles instansiering.
❇️ Et klassemedlem er en egenskap eller en metode som tilhører klassen. Det er to hovedtyper klassemedlemmer: metoder og egenskaper.
❇️ En egenskap er et klassemedlem som primært brukes til å lagre verdier. Dette kan være enkle datatyper som tall og strenger, men også mer komplekse datatyper som objekter og arrays.
❇️ Noen egenskaper er kun tilgjengelige innenfor klassen, og disse kalles private egenskaper. Andre egenskaper er tilgjengelige både innenfor og utenfor klassen, og disse kalles offentlige egenskaper.
❇️ En metode er en funksjon som er definert inne i en klasse. Den tilhører klassen og har tilgang til både offentlige og private egenskaper. I likhet med egenskaper finnes det også offentlige og private metoder.
❇️ Gettere og settere er spesielle metoder som gir et grensesnitt for kode utenfor klassen for å samhandle med egenskapene til klassen. Gettere brukes for å hente verdier, mens settere brukes for å sette verdier.
❇️ Noen medlemmer er statiske. Det betyr at de tilhører selve klassen og ikke tilgjengelig på instanser av klassen.
I motsetning til statiske medlemmer, finnes det også ikke-statiske medlemmer som er knyttet til instanser av klassen. Du må derfor instansiere klassen for å få tilgang til et ikke-statisk medlem.
Når du instansierer en klasse, kalles en spesiell metode som kalles konstruktør for å sette opp egenskapene til den nye instansen.
Forklaring av instansiering av klasser
For å instansiere en klasse i JavaScript, bruker vi nøkkelordet `new` etterfulgt av klassens navn. La oss for eksempel instansiere Array-klassen:
const myArr = new Array()
Opprette klasser i JavaScript
Denne delen tar for seg hvordan du lager en klasse i JavaScript, og hvordan du implementerer de konseptene vi har diskutert i avsnittet om terminologi. Vi vil gå gjennom flere eksempler der hvert eksempel bygger på det forrige.
Deklarere en tom klasse
For å deklarere en klasse i JavaScript, bruker vi nøkkelordet `class` etterfulgt av klassens navn. Deretter definerer vi klassens kropp, som er omsluttet av krøllparenteser. Alle klassemedlemmer defineres inne i klassens kropp.
Her er et eksempel på en klassedeklarasjon med en tom kropp:
class Dog {
}
Du kan nå instansiere klassen som følger og skrive ut instansen:
const pet = new Dog; console.log(pet);
Opprette offentlige egenskaper
Offentlige egenskaper defineres med en identifikator og en valgfri verdi.
class Dog {
name = "Roy";
age;
}
Her har vi definert `name` med en strengverdi og `age` uten en verdi.
const pet = new Dog(); console.log(pet.name); console.log(pet.age);
Definere offentlige metoder
Vi kan legge til metoder i klassen vår inne i klassens kropp. Metoder defineres på samme måte som funksjoner, men vi utelater nøkkelordet `function`.
class Dog {
name = "Roy";
age;
walk () {
console.log("Walking");
}
}
I eksemplet over har vi definert metoden `walk()`. Hver instans av `Dog`-klassen vil ha denne metoden.
const pet = new Dog(); pet.walk();
Tilgang til egenskaper fra metoder
I JavaScript får vi vanligvis tilgang til egenskaper på et objekt ved å bruke punktoperatoren. For eksempel, hvis vi hadde et objekt som heter `person` og ønsket å få tilgang til `name`-egenskapen, ville vi gjort det slik:
person.name
Men hvis vi ønsker å få tilgang til en egenskap fra *innsiden* av objektet, bruker vi nøkkelordet `this` i stedet for objektnavnet. Her er et eksempel:
this.name
Nøkkelordet `this` refererer til det aktuelle objektet. Så hvis vi ønsker å få tilgang til klasseegenskaper fra klassemetoder, bruker vi `this.
Opprette private egenskaper
La oss si at vi ønsket at `name`- og `age`-egenskapene vi definerte tidligere skulle være private. Vi vil omdefinere klassen som følger:
class Dog {
#name = "Roy";
#age;
walk () {
console.log("Walking");
}
}
Som du ser, er private egenskaper spesifisert ved hjelp av et `#`-tegn. Hvis du prøver å få tilgang til dem direkte fra utsiden, vil du få en feilmelding.
const dog = new Dog(); dog.#name
Opprette Getter- og Setter-metoder
Nå som klassens `name` og `age`-egenskaper er private, kan de kun nås ved hjelp av metoder inne i klassen.
Hvis vi ønsker å gi kode *utenfor* klassen mulighet til å få tilgang til disse egenskapene, definerer vi gettere og settere. La oss gjøre dette for `name`-egenskapen.
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
walk () {
console.log("Walking");
}
}
Med klassen definert som over, kan du sette og hente navnet ved å bruke koden nedenfor:
const pet = new Dog(); // Setting the name pet.name = "Rex"; // Getting the name console.log(pet.name);
Opprette private metoder
På samme måte som private egenskaper, har private metoder også et `#`-tegn som prefiks. Derfor vil deklarasjonen av en privat metode se slik ut:
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Hvis du prøver å få tilgang til disse metodene utenfor klassen, vil det ikke fungere.
const pet = new Dog(); pet.#increaseAge();
Opprette en konstruktørmetode
Du kan også definere en konstruktørmetode. Denne metoden vil automatisk bli kalt når du instansierer en ny klasse. Konstruktørmetoden kan brukes til å initialisere egenskaper. I dette eksemplet vil vi initialisere alder og navn med argumentene som brukeren oppgir under instansiering.
class Dog {
#name;
#age;
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Når vi instansierer klassen, kan vi oppgi navn og alder.
const pet = new Dog('Roy', 3);
console.log(pet.name);
Opprette statiske egenskaper og metoder
Som nevnt tidligere, kan statiske medlemmer nås uten å instansiere klassen først. I eksemplet nedenfor vil vi lage en statisk egenskap og en statisk metode.
class Dog {
#name;
#age;
static genus = "Canis";
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
static bark() {
console.log("Woof");
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Nå kan du få tilgang til den statiske egenskapen og metoden uten å instansiere klassen.
console.log(Dog.genus); Dog.bark();
Arv
Klasser kan arve egenskaper fra andre klasser. En klasse som arver medlemmer fra en annen klasse kalles en superklasse, mens klassen den arver medlemmer fra, er basisklassen eller underklassen.
For å lage en superklasse i JavaScript, bruker vi nøkkelordet `extends`. Her er et eksempel der vi arver fra `Dog`-klassen.
class Rottweiler extends Dog {
constructor (name, age) {
super(name, age);
this.breed = 'rottweiler';
}
}
Som du ser, er klassen i stor grad lik den forrige. Men inne i konstruktøren kalte vi superfunksjonen. Nøkkelordet `super` refererer til konstruktøren til basisklassen. Derfor kalte vi basisklassens konstruktør inne i superklassen vår og ga navn og alder.
const myPet = new Rottweiler(); console.log(myPet);
Konklusjon
I denne artikkelen har vi gått gjennom konseptet klasser i JavaScript. Vi har definert hva de er, medlemmene de kan inneholde og de ulike klassifikasjonene av disse medlemmene. Vi har også illustrert alt dette med eksempler.
Nå er du kanskje interessert i å lese om intervjuspørsmål relatert til objektorientert programmering.