Klasser i JavaScript

Denne artikel forklarer klasser i JavaScript.

YouTube Video

Klasser i JavaScript

I JavaScript inkorporerer en klasse begrebet objektorienteret programmering og fungerer som en blueprint for objekter. Med klasser kan du kortfattet definere en genstands egenskaber og metoder, hvilket forbedrer genbrugelighed og kodeorganisering. Klassesyntaks blev introduceret i JavaScript med ES6.

Klasse Definition

En klasse defineres med nøgleordet class og initialiseres typisk med en metode kaldet en constructor.

 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 særlig metode, der automatisk kaldes, når et objekt oprettes.
• Nøgleordet this refererer til instansen (objektet) af klassen inden for klassen.

Klasseegenskaber og -metoder

En klasse kan definere egenskaber og metoder. Egenskaber repræsenterer attributterne for et objekt, og metoder repræsenterer de funktioner, 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 eksempel erklæres en Car-klasse med brand og model egenskaber og en drive metode.

Klassearv

Klasser kan arve fra andre klasser. Ved hjælp af arv kan du oprette en ny klasse baseret på en eksisterende klasse og tilføje yderligere funktionalitet til den.

 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 eksempel arver Dog klassen fra Animal klassen.

• Nøgleordet extends bruges til at arve fra Animal klassen.
• I constructoren for Dog klassen bruges super() til at kalde constructoren for forældreklassen. Dette gør det muligt at arve initialiseringsprocessen fra forældreklassen.
• Inden for den arvede klasse kan du overskrive metoderne i forældreklassen. I dette eksempel vises "Rex barks" i stedet for "Rex makes a noise".

Statisk Metoder

Når du definerer en statisk metode i en klasse, er metoden knyttet til selve klassen. Statisk metoder kan kaldes uden at blive instantieret.

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 eksempel har MathUtils-klassen en statisk metode add defineret.

• Nøgleordet static bruges til at definere en statisk metode.
• Statisk metoder tilhører ikke klasseinstanser og kan kaldes direkte fra selve klassen.

Gettere og Settere

Ved at definere gettere og settere i en klasse kan du kapsle indlæsning og ændring af egenskaber ind.

 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 eksempel definerer Rectangle-klassen en area-getter og en widthValue-setter.

• Getter (get) kaldes, når værdien af en egenskab hentes.
• Setter (set) kaldes, når værdien af en egenskab sættes.

Klassesyntaktisk Sukker

I JavaScript implementeres klassesyntaks internt ved hjælp af konstruktørfunktioner og prototyper. Klassesyntaks er syntaktisk sukker, der gør det muligt at skrive dette mere kortfattet.

 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 eksempel er en konstruktørfunktion Person defineret, og metoden greet er defineret ved hjælp af en prototype.

Håndtering af this

Nøgleordet this inde i en klasse refererer til instansen af den klasse. Men når du arbejder med this i klassens metoder, skal du være opmærksom på, at dens adfærd kan variere afhængigt af scope. Problemer kan især opstå, når metoder bruges som callback-funktioner.

 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 sådanne tilfælde, når det gives som en callback til setTimeout, kan referencen, som this peger på, ændres. For at undgå dette problem anbefales det enten at fastlåse this ved hjælp af bind-metoden eller bruge pilfunktioner.

 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 bruges som skabeloner til at oprette objekter samt definere egenskaber og metoder.
• Du kan bruge arv til at udvide en klasse og udnytte objektorienterede principper.
• Statisk metoder tilhører selve klassen og kan bruges uden at oprette en instans.
• Du kan kapsle egenskaber ind ved hjælp af gettere og settere.
• JavaScripts klassesyntaks er syntaktisk sukker og bruger internt prototype-baseret arv.

Ved at bruge klasser kan du håndtere objektorienteret programmering mere naturligt og forbedre kodegenanvendelighed og vedligeholdelse.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video