Klasser i JavaScript

Den här artikeln förklarar klasser i JavaScript.

YouTube Video

Klasser i JavaScript

I JavaScript inkluderar en klass konceptet objektorienterad programmering och fungerar som en ritning för objekt. Med klasser kan du på ett kortfattat sätt definiera en objekts egenskaper och metoder, vilket förbättrar återanvändbarhet och kodorganisering. Klasser introducerades i JavaScript med ES6.

Klassdefinition

En klass definieras med nyckelordet class och initieras vanligtvis med en metod som kallas 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 definierar en klass med class Person.
• constructor är en speciell metod som automatiskt anropas när ett objekt skapas.
• Nyckelordet this hänvisar till instansen (objektet) av klassen inom klassen.

Klassens egenskaper och metoder

En klass kan definiera egenskaper och metoder. Egenskaper representerar ett objekts attribut och metoder representerar 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 det här exemplet deklareras en Car-klass med egenskaperna brand och model samt metoden drive.

Klassarv

Klasser kan ärva från andra klasser. Med hjälp av arv kan du skapa en ny klass baserad på en befintlig klass och lägga till ytterligare funktionalitet.

 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 det här exemplet ärver Dog-klassen från Animal-klassen.

• Nyckelordet extends används för att ärva från Animal-klassen.
• I konstruktorn för Dog-klassen används super() för att anropa konstruktorn för föräldraklassen. Detta gör att du kan ärva initialiseringsprocessen från föräldraklassen.
• Inom den ärvda klassen kan du skriva över metoderna i föräldraklassen. I det här exemplet visas "Rex barks" istället för "Rex makes a noise".

Statiska metoder

När du definierar en statisk metod i en klass är metoden associerad med själva klassen. Statiska metoder kan anropas utan att instansieras.

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 det här exemplet har MathUtils-klassen en statisk metod add definierad.

• Nyckelordet static används för att definiera en statisk metod.
• Statiska metoder tillhör inte klassinstanser och kan anropas direkt från själva klassen.

Getter- och Setter-metoder

Genom att definiera getter- och setter-metoder i en klass kan du kapsla in hämtning och inställning 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 det här exemplet definierar Rectangle-klassen en area-getter och en widthValue-setter.

• Getter (get) anropas när värdet av en egenskap hämtas.
• Setter (set) anropas när värdet av en egenskap sätts.

Klass-syntax förkortning

I JavaScript implementeras klass-syntax internt med hjälp av konstruktörsfunktioner och prototyper. Klass-syntax är syntaktiskt socker för att skriva detta mer kortfattat.

 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 det här exemplet definieras en konstruktörsfunktion Person, och metoden greet definieras med hjälp av en prototyp.

Hantera this

Nyckelordet this i en klass hänvisar till instansen av den klassen. Men när du hanterar this i klassmetoder måste du vara medveten om att dess beteende kan variera beroende på räckvidden. Problem kan särskilt uppstå när metoder används 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ådana fall, när en callback skickas till setTimeout, kan referensen som this pekar på ändras. För att undvika detta problem rekommenderas det att antingen låsa this med metoden bind eller använda pilarregler.

 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);

Sammanfattning

• Klasser används som ritningar för att skapa objekt och definiera egenskaper och metoder.
• Du kan använda arv för att utöka en klass genom att använda objektorienterade koncept.
• Statiska metoder tillhör själva klassen och kan användas utan att skapa en instans.
• Du kan kapsla in egenskaper med hjälp av getter och setter.
• JavaScripts klasssyntax är syntaxsockring och använder internt prototypbaserat arv.

Genom att använda klasser kan du hantera objektorienterad programmering mer naturligt och förbättra kodens återanvändbarhet och underhållbarhet.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video