JavaScript-Klassen

ECMAScript 2015, auch als ES6 bezeichnet, führte die JavaScript-Klassen ein.

JavaScript-Klassen sind Muster von JavaScript-Objekten.

JavaScript-Klassen

Syntax

Verwenden Sie den Schlüsselwort class Erstellen Sie eine Klasse.

Fügen Sie immer constructor() Methoden:

Syntax

class Klassenname {
  constructor() { ... }
}

Ein Beispiel

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

Der obige Beispiel erstellt eine Klasse namens "Car".

Diese Klasse hat zwei Initialattribute: "name" und "year".

JavaScript-KlassenKeinObjekt.

Es ist nur ein JavaScript-ObjektMuster.

Verwendung der Klasse

Wenn Sie eine Klasse haben, können Sie die Klasse verwenden, um Objekte zu erstellen:

Ein Beispiel

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Probieren Sie es selbst aus

Der obige Beispiel verwendet Car-Klassehat zwei erstellt Car-Objekt.

Die Methode constructor wird automatisch aufgerufen, wenn ein neues Objekt erstellt wird.

Konstruktor-Methode

Ein Konstruktor ist eine spezielle Methode:

  • Es muss den genauen Namen "Konstruktor" haben
  • Wird automatisch ausgeführt, wenn ein neuer Objekt erstellt wird
  • Verwendet, um Objektattribute zu initialisieren
  • Fügt JavaScript automatisch eine leere Konstruktor-Methode hinzu, wenn keine definiert ist.

Class-Methode

Erstellung von Klassenmethoden

Syntax

Wie bei Objektmethoden.

Verwenden Sie den Schlüsselwort class Erstellen Sie eine Klasse.

Fügen Sie immer constructor() Methoden.

Fügen Sie dann eine beliebige Anzahl von Methoden hinzu.

Syntax

class Klassenname {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Erstellen Sie eine Klasse-Methode namens "age", die das Alter des Autos zurückgibt:

Ein Beispiel

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "Mein Auto ist " + myCar.age() + " Jahre alt.";

Probieren Sie es selbst aus

Sie können Parameter an Methoden der Klasse senden:

Ein Beispiel

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "Mein Auto ist " + myCar.age(year) + " Jahre alt.";

Probieren Sie es selbst aus

Browser-Unterstützung

Nachstehende Tabelle zeigt die erste Browser-Version, die JavaScript-Klassen vollständig unterstützt:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
März 2016 Juli 2015 März 2016 Oktober 2015 März 2016

Im Anschluss an dieses Tutorial werden Sie mehr über die Kenntnisse der JavaScript-Klassen lernen.