Klasser i JavaScript

Denne artikkelen forklarer klasser i JavaScript.

YouTube Video

Klasser i JavaScript

I JavaScript innfører en klasse konseptet med objektorientert programmering og fungerer som en mal for objekter. Med klasser kan du enkelt definere et objekts egenskaper og metoder, noe som forbedrer gjenbruk og kodeorganisering. Klasse-syntaks ble introdusert i JavaScript med ES6.

Klassedefinisjon

En klasse defineres med nøkkelordet class og initieres vanligvis med en metode kalt en konstruktør.

 1class Person {
 2    // Constructor method (called when the class is instantiated)
 3    constructor(name, age) {
 4        this.name = name; // Property definition
 5        this.age = age;
 6    }
 7
 8    // Method definition
 9    greet() {
10        return `Hello, my name is ${this.name}`;
11    }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice

• Vi definerer en klasse med class Person.
• constructor er en spesiell metode som automatisk kalles når et objekt opprettes.
• Nøkkelordet this refererer til instansen (objektet) av klassen innenfor klassen.

Klasseegenskaper og metoder

En klasse kan definere egenskaper og metoder. Egenskaper representerer et objekts attributter, og metoder representerer funksjonene det har.

 1class Car {
 2    constructor(brand, model) {
 3        this.brand = brand;
 4        this.model = model;
 5    }
 6
 7    // Method definition
 8    drive() {
 9        console.log(`Driving a ${this.brand} ${this.model}`);
10    }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla

I dette eksempelet erklæres en Car-klasse med brand- og model-egenskaper og en drive-metode.

Klassearv

Klasser kan arve fra andre klasser. Ved å bruke arv kan du opprette en ny klasse basert på en eksisterende klasse og legge til ekstra funksjonalitet.

 1class Animal {
 2    constructor(name) {
 3        this.name = name;
 4    }
 5
 6    speak() {
 7        console.log(`${this.name} makes a noise`);
 8    }
 9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13    constructor(name, breed) {
14        super(name); // Call the constructor of the parent class (Animal)
15        this.breed = breed;
16    }
17
18    // Override the method
19    speak() {
20        console.log(`${this.name} barks`);
21    }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks

I dette eksempelet arver klassen Dog fra klassen Animal.

• Nøkkelordet extends brukes til å arve fra klassen Animal.
• I konstruktøren til Dog-klassen brukes super() til å kalle konstruktøren til foreldrekategorien. Dette gjør at du kan arve initialiseringsprosessen fra foreldrekategorien.
• Innenfor den arvede klassen kan du overstyre metodene i foreldrekategorien. I dette eksempelet vises "Rex bjeffer" i stedet for "Rex lager en lyd".

Statiske metoder

Når du definerer en statisk metode i en klasse, er metoden knyttet til selve klassen. Statistiske metoder kan kalles uten at de instansieres.

1class MathUtils {
2    // Static method
3    static add(a, b) {
4        return a + b;
5    }
6}
7
8console.log(MathUtils.add(5, 10)); // 15

I dette eksemplet har klassen MathUtils en statisk metode add definert.

• Nøkkelordet static brukes til å definere en statisk metode.
• Statistiske metoder tilhører ikke klasseinstanser og kan kalles direkte fra selve klassen.

Gettere og Settere

Ved å definere gettere og settere i en klasse kan du kapsle inn henting og oppdatering av egenskaper.

 1class Rectangle {
 2    constructor(width, height) {
 3        this.width = width;
 4        this.height = height;
 5    }
 6
 7    // Getter
 8    get area() {
 9        return this.width * this.height;
10    }
11
12    // Setter
13    set widthValue(newWidth) {
14        this.width = newWidth;
15    }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300

I dette eksemplet definerer klassen Rectangle en getter area og en setter widthValue.

• Getter (get) kalles når man henter verdien til en egenskap.
• Setter (set) kalles når man setter verdien til en egenskap.

Klasse-syntaksforenkling

I JavaScript implementeres klasse-syntaks internt ved hjelp av konstruktørfunksjoner og prototyper. Klasse-syntaks er syntaksforenkling for å skrive dette på en mer kortfattet måte.

 1// Example without using class syntax
 2function Person(name, age) {
 3    this.name = name;
 4    this.age = age;
 5}
 6
 7Person.prototype.greet = function() {
 8    return `Hello, my name is ${this.name}`;
 9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice

I dette eksemplet er en konstruktørfunksjon Person definert, og metoden greet er definert ved hjelp av en prototype.

Håndtering av this

Nøkkelordet this i en klasse refererer til instansen av den klassen. Når man bruker this i klassemetoder, må man være klar over at oppførselen kan variere avhengig av omfanget. Problemer kan spesielt oppstå når metoder brukes som tilbakeringingsfunksjoner.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.

I slike tilfeller, når en metode gis som en tilbakeringing til setTimeout, kan referansen this peker på endres. For å unngå dette problemet anbefales det å enten fikse this ved å bruke bind-metoden eller bruke pilfunksjoner.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);

Sammendrag

• Klasser brukes som byggeplaner for å opprette objekter, definere egenskaper og metoder.
• Du kan bruke arv for å utvide en klasse, og utnytte objektorienterte konsepter.
• Statistiske metoder tilhører selve klassen og kan brukes uten å opprette en instans.
• Du kan kapsle inn egenskaper ved hjelp av gettere og settere.
• JavaScripts klassesyntaks er syntakssukker og bruker internt prototype-basert arv.

Ved å bruke klasser kan du håndtere objektorientert programmering mer naturlig, og forbedre gjenbrukbarheten og vedlikeholdbarheten av koden.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video