Klassen in JavaScript

Dieser Artikel erklärt Klassen in JavaScript.

YouTube Video

Klassen in JavaScript

In JavaScript umfasst eine Klasse das Konzept der objektorientierten Programmierung und dient als Vorlage für Objekte. Mit Klassen können die Eigenschaften und Methoden eines Objekts prägnant definiert werden, was die Wiederverwendbarkeit und Codeorganisation verbessert. Die Klassensyntax wurde mit ES6 in JavaScript eingeführt.

Klassendefinition

Eine Klasse wird mit dem Schlüsselwort class definiert und üblicherweise mit einer Methode namens constructor initialisiert.

 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

• Wir definieren eine Klasse mit class Person.
• Der constructor ist eine spezielle Methode, die automatisch aufgerufen wird, wenn ein Objekt erstellt wird.
• Das Schlüsselwort this bezieht sich auf die Instanz (das Objekt) der Klasse innerhalb der Klasse.

Klasseneigenschaften und Methoden

Eine Klasse kann Eigenschaften und Methoden definieren. Eigenschaften stellen die Attribute eines Objekts dar, und Methoden repräsentieren die Funktionen, die es hat.

 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

In diesem Beispiel wird eine Car-Klasse mit den Eigenschaften brand und model sowie einer Methode drive deklariert.

Klassenvererbung

Klassen können von anderen Klassen erben. Mit Vererbung können Sie auf Basis einer vorhandenen Klasse eine neue Klasse erstellen und zusätzliche Funktionalitäten hinzufügen.

 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

In diesem Beispiel erbt die Dog-Klasse von der Animal-Klasse.

• Das Schlüsselwort extends wird verwendet, um von der Animal-Klasse zu erben.
• Im Konstruktor der Dog-Klasse wird super() verwendet, um den Konstruktor der Elternklasse aufzurufen. Dadurch können Sie den Initialisierungsprozess der Elternklasse erben.
• Innerhalb der geerbten Klasse können Sie die Methoden der Elternklasse überschreiben. In diesem Beispiel wird anstelle von "Rex macht ein Geräusch" "Rex bellt" angezeigt.

Statische Methoden

Wenn Sie eine statische Methode innerhalb einer Klasse definieren, wird die Methode der Klasse selbst zugeordnet. Statische Methoden können aufgerufen werden, ohne instanziiert zu werden.

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

In diesem Beispiel hat die Klasse MathUtils eine statische Methode add definiert.

• Das Schlüsselwort static wird verwendet, um eine statische Methode zu definieren.
• Statische Methoden gehören nicht zu Klasseninstanzen und können direkt von der Klasse selbst aufgerufen werden.

Getter und Setter

Durch die Definition von Gettern und Settern in einer Klasse können Sie das Abrufen und Setzen von Eigenschaften kapseln.

 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

In diesem Beispiel definiert die Klasse Rectangle einen area-Getter und einen widthValue-Setter.

• Getter (get) wird aufgerufen, wenn der Wert einer Eigenschaft abgerufen wird.
• Setter (set) wird aufgerufen, wenn der Wert einer Eigenschaft festgelegt wird.

Klassensyntax-Zucker

In JavaScript wird die Klassensyntax intern mithilfe von Konstruktorfunktionen und Prototypen implementiert. Die Klassensyntax ist Syntax-Zucker, um diese kürzer zu schreiben.

 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

In diesem Beispiel wird eine Konstruktorfunktion Person definiert, und die Methode greet wird mithilfe eines Prototyps definiert.

Umgang mit this

Das Schlüsselwort this in einer Klasse bezieht sich auf die Instanz dieser Klasse. Beim Umgang mit this in Klassenmethoden müssen Sie jedoch beachten, dass sich sein Verhalten je nach Scope ändern kann. Probleme können insbesondere auftreten, wenn Methoden als Callback-Funktionen verwendet werden.

 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.

In solchen Fällen kann sich der Verweis auf this ändern, wenn es als Callback an setTimeout übergeben wird. Um dieses Problem zu vermeiden, wird empfohlen, this entweder mit der Methode bind zu fixieren oder Pfeilfunktionen zu verwenden.

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

Zusammenfassung

• Klassen werden als Vorlagen für die Erstellung von Objekten sowie zur Definition von Eigenschaften und Methoden verwendet.
• Sie können Vererbung verwenden, um eine Klasse zu erweitern und objektorientierte Konzepte zu nutzen.
• Statische Methoden gehören zur Klasse selbst und können ohne Instanziierung verwendet werden.
• Sie können Eigenschaften mithilfe von Gettern und Settern kapseln.
• Die Klassensyntax von JavaScript ist Syntax-Zucker und verwendet intern prototypbasierte Vererbung.

Durch die Verwendung von Klassen können Sie objektorientierte Programmierung natürlicher handhaben und die Wiederverwendbarkeit und Wartbarkeit des Codes verbessern.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video