En komplett guide med eksempler

JavaScript er et multiparadigmespråk som lar deg skrive programmer som følger funksjonelle, objektorienterte og imperative programmeringsstiler.

For å støtte objektorienterte mønstre har JavaScript klasser. Fordi det er avgjørende å forstå dem, er denne artikkelen en veiledning om hva JavaScript-klasser er og hvordan du bruker dem.

Hva er klasser i JavaScript?

I objektorientert programmering modellerer vi systemer som grupper av objekter som samhandler med hverandre. For å fungere, lagrer objekter data i egenskaper og utfører handlinger definert som deres metoder. En klasse definerer hvilke egenskaper og metoder som bæres av objekter av samme type. Derfor er klasser skisser for objekter.

Terminologier som brukes i klasser

For å sikre at vi er på samme side, her er en beskrivelse av klasser med nøkkelbegreper vi vil bruke i denne artikkelen. Hvis du allerede er kjent med objektorientert programmering, kan du hoppe til neste seksjon.

❇️ En klasse er en blåkopi for et objekt. Den gir en mal som objekter av den typen kan lages fra. Å lage et objekt fra malen fra klassen kalles instansiering.

❇️ Et klassemedlem er alt som tilhører klassen. Det er to typer klassemedlemmer – metoder og egenskaper.

❇️ En eiendom er et klassemedlem hvis primære formål er å lagre verdier. Dette kan være enkle verdier som tall og strenger. De kan også være komplekse objekter og matriser.

❇️ Noen eiendommer er kun tilgjengelige innenfor klassen og heter det passende navnet private eiendommer. Noen er tilgjengelige både i og utenfor klassen. Slike eiendommer kalles offentlige eiendommer.

❇️ En metode er en funksjon definert inne i en klasse. Derfor tilhører den klassen og har tilgang til offentlige og private eiendommer. I likhet med eiendommer har vi også offentlige metoder og private metoder.

  Kan Bluetooth-smartklokken din hackes?

❇️ Det finnes noen metoder for å gi et grensesnitt for kode utenfor klassen for å samhandle med egenskaper inne i klassen. Det er to grupper av metoder som gjør dette: gettere og settere. Getters får verdier for klasseegenskaper, mens settere setter verdier for klasseegenskaper.

❇️ Noen medlemmer er statiske. Dette betyr at de bare er tilgjengelige på klassen og ikke kan nås på klasseforekomster.

Derimot er noen klassemedlemmer ikke statiske, noe som betyr at de bare kan nås på klasseforekomster. Du må instansiere klassen før du kan få tilgang til et ikke-statisk medlem.

Når du instansierer en klasse, kalles en spesiell metode for å sette opp egenskaper for instansen. Denne metoden kalles konstruktørfunksjonen.

Instantiering av en klasse forklart

Vi bruker det nye nøkkelordet og klassenavnet for å instansiere en klasse i JavaScript. La oss for eksempel instansiere Array-klassen.

const myArr = new Array()

Opprette klasser i JavaScript

Denne delen vil diskutere å lage en klasse som implementerer alle konseptene vi dekket i Terminologiseksjonen. Vi vil gjøre dette i en rekke eksempler, der hvert eksempel bygger på de foregående.

Erklære en tom klasse

For å erklære en klasse i JavaScript bruker vi klassenøkkelordet og gir klassen et navn. Deretter definerer vi kroppen til klassen. Kroppen er innelukket i krøllete seler og holder alle klassemedlemmene.

Her er et eksempel på en klasseerklæring med en tom kropp:

class Dog {

}

Nå kan du instansiere klassen som følger og skrive den ut.

const pet = new Dog;
console.log(pet);

Opprette offentlige eiendommer

Offentlige egenskaper er definert med en identifikator og en valgfri verdi.

class Dog {
    name = "Roy";
    age;
}

Her har vi definert navnet med en strengverdi og alderen uten verdi.

const pet = new Dog();

console.log(pet.name);
console.log(pet.age);

Definere offentlige metoder

Vi kan legge til metoder til klassen vår inne i kroppen. Vi definerer en metode på samme måte som vi ville definert en funksjon. Vi utelater imidlertid funksjonsnøkkelordet.

class Dog {
    name = "Roy";
    age;

    walk () {
        console.log("Walking");
    }
}

I eksemplet ovenfor definerte vi gåmetoden. Hver forekomst av Animal-klassen vil ha den 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 navnegenskapen, ville vi gjort det som følger.

person.name

Men hvis vi ønsker å få tilgang til en egenskap fra objektet, bruker vi dette nøkkelordet i stedet for objektnavnet. Her er et eksempel:

this.name

Dette nøkkelordet refererer til objektet. Så hvis vi ønsket å få tilgang til klasseegenskaper fra klassemetoder, ville vi brukt denne. syntaks.

  Slik lukker du Fidelity-konto

Opprette private egenskaper

Anta at vi ønsket at navn og aldersegenskapene 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 kan se, er private eiendommer spesifisert ved hjelp av pundtegn. Hvis du prøvde å få tilgang til dem, ville du støte på feil.

const dog = new Dog();

dog.#name

Opprette Getter- og Setter-metoder

Nå er klassens navn og aldersegenskaper private. Derfor kan de bare nås med metoder inne i klassen.

Hvis vi ønsker å aktivere kode utenfor klassen for å få tilgang til disse egenskapene, definerer vi gettere og settere. La oss gjøre det for navnet eiendom.

class Dog {
    #name = "Roy";
    #age;

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    walk () {
        console.log("Walking");
    }
}

Med klassen definert ovenfor, kan du angi navnet og vise det ved å bruke koden nedenfor:

const pet = new Dog();

// Setting the name
pet.name = "Rex";

// Getting the name
console.log(pet.name);

Opprette private metoder

I likhet med private eiendommer er private metoder prefikset med pundtegnet. Derfor vil det å erklære 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øvde å få tilgang til disse metodene utenfor klassen, ville det ikke fungere.

const pet = new Dog();
pet.#increaseAge();

Opprette en konstruktørmetode

Du kan også definere konstruktørmetoden. 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 alderen og navnet til de argumentene brukeren oppgir under instansieringen.

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 vår, kan vi oppgi navn og alder.

const pet = new Dog('Roy', 3);
console.log(pet.name);

Opprette statiske egenskaper og metoder

Som nevnt kan statiske medlemmer nås uten å instansiere klassen først. I eksemplet nedenfor vil vi lage en statisk egenskap og 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 instansiering.

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.

  Slik tar du med deg smarthjemmet ditt utenfor

For å lage en superklasse i JavaScript bruker vi nøkkelordet extends. Her er et eksempel hvor vi arver fra hundeklassen.

class Rottweiler extends Dog {
    constructor (name, age) {
        super(name, age);
        this.breed = 'rottweiler';
    }
}

Som du ser er klassen stort sett den samme som før. Men inne i konstruktøren kalte vi superfunksjonen. Supernøkkelordet refererer til basisklassens konstruktør. Derfor ringte 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 dekket vi klasser. Vi dekket hva de er, medlemmene de kan holde, og de forskjellige klassifiseringene for medlemmene. Så illustrerte vi alt dette med eksempler.

Deretter vil du kanskje lese objektorienterte programmeringsintervjuspørsmål.