css mit Adi Prinz

Klassen in JavaScript

In JavaScript ist eine Klasse eine Vorlage für die Erstellung von Objekten mit gemeinsamen Eigenschaften und Methoden.
Klassen bieten eine saubere und verständliche Syntax für die objektorientierte Programmierung (OOP). Sie wurden in ECMAScript 6 (ES6) eingeführt und bieten eine vereinfachte Möglichkeit, Konstruktorfunktionen und Prototypen zu definieren.

// Definition einer Klasse
class Person {
// Konstruktor-Methode
constructor(name, age) {
this.name = name;
this.age = age;
}

// Methode
greet() {
console.log(`Hallo, mein Name ist ${this.name} und ich bin ${this.age} Jahre alt.`);
}
}

// Erstellen einer neuen Instanz der Klasse
const person1 = new Person('Alice', 30);
person1.greet(); // Ausgabe: Hallo, mein Name ist Alice und ich bin 30 Jahre alt.

// Eine weitere Instanz der Klasse
const person2 = new Person('Bob', 25);
person2.greet(); // Ausgabe: Hallo, mein Name ist Bob und ich bin 25 Jahre alt.

class ClassName {
  constructor() { ... }
}

// Declaration
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
// Erstellen einer Instanz und Zugriff auf Eigenschaften
const rect1 = new Rectangle(10, 20);
console.log(rect1.height); // Ausgabe: 10
console.log(rect1.width);  // Ausgabe: 20

// Expression; die Klasse ist anonym, aber einer Variablen zugewiesen
const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
// Erstellen einer Instanz und Zugriff auf Eigenschaften
const rect2 = new Rectangle(15, 25);
console.log(rect2.height); // Ausgabe: 15
console.log(rect2.width);  // Ausgabe: 25

// Expression; die Klasse hat ihren eigenen Namen und zusätzlich eine Methode
const Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Beispielmethode, um die Fläche zu berechnen
  getArea() {
    return this.height * this.width;
  }
};
// Erstellen einer Instanz und Aufruf der Methode
const rect3 = new Rectangle(5, 10);
console.log(rect3.getArea()); // Ausgabe: 50

JavaScript Class extends

In JavaScript ermöglicht die extends-Syntax einer Klasse, eine andere Klasse zu erweitern, wodurch die erweiterte Klasse Zugriff auf alle Methoden und Eigenschaften der Basisklasse erhält. Hier ist ein einfaches Beispiele, um die Verwendung von extends zu veranschaulichen:

// Basisklasse
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  // Methode zur Berechnung der Fläche
  getArea() {
    return this.height * this.width;
  }
}

// Abgeleitete Klasse
class Square extends Rectangle {
  constructor(sideLength) {
    // Aufruf des Konstruktors der Basisklasse
    super(sideLength, sideLength);
  }
}

// Instanz der Basisklasse
const rect = new Rectangle(10, 20);
console.log(rect.getArea()); // Ausgabe: 200

// Instanz der abgeleiteten Klasse
const square = new Square(10);
console.log(square.getArea()); // Ausgabe: 100

1. Basisklasse Rectangle:
   • Definiert einen Konstruktor, der die Eigenschaften height und width initialisiert.
   • Enthält eine Methode getArea(), die die Fläche des Rechtecks berechnet.
2. Abgeleitete Klasse Square:
   • Erweitert die Basisklasse Rectangle mit der extends-Syntax.
   • Definiert einen Konstruktor, der super() aufruft, um den Konstruktor der Basisklasse mit den passenden Argumenten zu verwenden. In diesem Fall wird sideLength sowohl für height als auch für width verwendet.
3. Instanz der Basisklasse:
   • Erstellt eine Instanz von Rectangle und ruft die Methode getArea() auf.
4. Instanz der abgeleiteten Klasse:
   • Erstellt eine Instanz von Square und ruft die Methode getArea() auf, die von der Basisklasse Rectangle geerbt wurde.

JavaScript Class static

In JavaScript können statische Methoden und statische Eigenschaften in Klassen definiert werden, indem das Schlüsselwort static verwendet wird. Statische Methoden sind solche, die direkt auf der Klasse aufgerufen werden können, ohne dass eine Instanz der Klasse erstellt werden muss. Statische Eigenschaften sind Eigenschaften, die auf Klassenebene definiert sind und für alle Instanzen der Klasse gemeinsam sind.

class MathUtil {
// Statische Methode zur Berechnung der Quadratwurzel
static squareRoot(x) {
return Math.sqrt(x);
}

// Statische Eigenschaft für die Beschreibung der MathUtil-Klasse
static description = "Utility class for mathematical operations";
}

// Aufruf der statischen Methode ohne Instanz
const sqrtOf16 = MathUtil.squareRoot(16);
console.log(sqrtOf16); // Ausgabe: 4

// Zugriff auf die statische Eigenschaft
console.log(MathUtil.description); // Ausgabe: Utility class for mathematical operations

1. Statische Methode squareRoot():
   • Wird mit static deklariert und kann direkt über den Klassennamen aufgerufen werden (MathUtil.squareRoot(16)).
2. Statische Eigenschaft description:
   • Wird ebenfalls mit static deklariert und kann direkt über den Klassennamen aufgerufen werden (MathUtil.description).
3. Aufruf ohne Instanz:
   • Statische Methoden und Eigenschaften können aufgerufen werden, ohne dass eine Instanz der Klasse MathUtil erstellt werden muss.

JavaScript Class super

In JavaScript wird das Schlüsselwort super verwendet, um auf die Elternklasse (Superklasse) einer abgeleiteten Klasse (Unterklasse) zu verweisen. Es wird häufig verwendet, um den Konstruktor der Superklasse aufzurufen und deren Eigenschaften und Methoden zu erben. Hier ist eine Erklärung und ein Beispiel für die Verwendung von super in JavaScript:

1. super im Konstruktor:
   • In einer abgeleiteten Klasse kann super() im Konstruktor verwendet werden, um den Konstruktor der Elternklasse aufzurufen und die Eigenschaften der Elternklasse zu initialisieren.
2. super für Methodenaufrufe:
   • super.methodName() wird verwendet, um eine Methode der Superklasse aufzurufen.

class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    return 'Animal sound';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Ruft den Konstruktor der Elternklasse mit dem Parameter 'name' auf
    this.breed = breed;
  }

  makeSound() {
    return 'Woof!'; // Überschreibt die makeSound-Methode der Elternklasse
  }

  greet() {
    return `Hello, I'm ${this.name} the ${this.breed}.`;
  }

  callSuperMakeSound() {
    return super.makeSound(); // Aufruf der makeSound-Methode der Elternklasse
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
console.log(myDog.greet()); // Ausgabe: Hello, I'm Buddy the Golden Retriever.
console.log(myDog.makeSound()); // Ausgabe: Woof!
console.log(myDog.callSuperMakeSound()); // Ausgabe: Animal sound

1. class Animal:
   • Definiert eine Basisklasse Animal mit einem Konstruktor, der name initialisiert und makeSound() als Methode enthält.
2. class Dog extends Animal:
   • Erbt von der Klasse Animal.
   • Im Konstruktor von Dog wird super(name) verwendet, um den Konstruktor der Superklasse Animal mit dem name-Parameter aufzurufen.
   • Überschreibt die Methode makeSound() der Elternklasse Animal.
   • Fügt die Methode greet() hinzu, um eine Begrüßungsnachricht zu generieren.
   • Fügt die Methode callSuperMakeSound() hinzu, um die makeSound()-Methode der Elternklasse Animal aufzurufen.
3. Verwendung:
   • Erzeugt eine Instanz myDog der Klasse Dog mit dem Namen 'Buddy' und der Rasse 'Golden Retriever'.
   • Ruft Methoden der Instanz myDog auf, einschließlich der überschriebenen Methode makeSound() und der callSuperMakeSound()-Methode, um die Methode der Elternklasse aufzurufen.