Reagieren Sie auf ES6-Klassen


Klassen

ES6 eingeführte Klassen.

Eine Klasse ist eine Art Funktion, aber anstatt sie mit dem Schlüsselwort functionzu initiieren, verwenden wir das Schlüsselwort class, und die Eigenschaften werden innerhalb einer constructor()Methode zugewiesen.

Beispiel

Ein einfacher Klassenkonstruktor:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

Beachten Sie die Schreibweise des Klassennamens. Wir haben den Namen "Car" mit einem Großbuchstaben begonnen. Dies ist eine Standard-Namenskonvention für Klassen.

Jetzt können Sie Objekte mit der Klasse Auto erstellen:

Beispiel

Erstellen Sie ein Objekt mit dem Namen "mycar" basierend auf der Car-Klasse:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

Hinweis: Die Konstruktorfunktion wird automatisch aufgerufen, wenn das Objekt initialisiert wird.


w3schools CERTIFIED . 2022

Zertifiziert werden!

Absolvieren Sie die React-Module, machen Sie die Übungen, machen Sie die Prüfung und werden Sie w3schools-zertifiziert!!

$ 95 REGISTRIEREN

Methode im Unterricht

Sie können Ihre eigenen Methoden in einer Klasse hinzufügen:

Beispiel

Erstellen Sie eine Methode namens "present":

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

Wie Sie im obigen Beispiel sehen können, rufen Sie die Methode auf, indem Sie auf den Methodennamen des Objekts verweisen, gefolgt von Klammern (Parameter würden in die Klammern eingefügt).


Klassenvererbung

Um eine Klassenvererbung zu erstellen, verwenden Sie das extends Schlüsselwort.

Eine Klasse, die mit einer Klassenvererbung erstellt wurde, erbt alle Methoden von einer anderen Klasse:

Beispiel

Erstellen Sie eine Klasse namens "Model", die die Methoden von der Klasse "Car" erbt:

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

Die super()Methode bezieht sich auf die übergeordnete Klasse.

Durch Aufrufen der super()Methode in der Konstruktormethode rufen wir die Konstruktormethode des übergeordneten Elements auf und erhalten Zugriff auf die Eigenschaften und Methoden des übergeordneten Elements.

Weitere Informationen zu Klassen finden Sie in unserem Abschnitt JavaScript-Klassen .