JavaScript-Klassen

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

JavaScript-Klassen sind Mustervorlagen für JavaScript-Objekte.

JavaScript-Klassen Syntax

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

Fügen Sie immer eine Methode mit dem Namen constructor() Methoden:

Syntax

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

Beispiel

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

Der obige Beispiel erstellt eine Klasse namens "Car".

Diese Klasse hat zwei grundlegende Attribute: "name" und "year".

JavaScript-KlassenNichtObjekt.

Es ist ein JavaScript-ObjektMuster.

Verwenden Sie die Klasse

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

Beispiel

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

Versuchen Sie es selbst

Der obige Beispiel verwendet Car-Klasseum zwei zu erstellen Car-Objekt.

Der Konstruktor wird automatisch aufgerufen, wenn ein neues Objekt erstellt wird (Konstruktor-Methode).

Konstruktor

Der Konstruktor ist eine spezielle Methode:

  • Es muss den genauen Namen "constructor" haben
  • Wird automatisch ausgeführt, wenn ein neuer Objekt erstellt wird
  • Für die Initialisierung von Objektattributen verwendet
  • Wenn Sie keine Konstruktormethode definiert haben, fügt JavaScript eine leere Konstruktormethode hinzu.

Klassenmethoden

Die Syntax für die Erstellung von Klassenmethoden ist wie für Objektmethoden.

Verwenden Sie den Schlüsselwort class, um eine Klasse zu erstellen.

Fügen Sie immer die Methode constructor() hinzu.

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

Syntax

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

Erstellen Sie eine Methode namens "age", die das Autojahr zurückgibt:

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.";

Versuchen Sie es selbst

Sie können Parameter an Methoden der Klasse senden:

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.";

Versuchen Sie es selbst

Browser-Unterstützung

Die folgende Tabelle zeigt die erste vollständige Unterstützung für die JavaScript-Klasse der Browser-Version:

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

"use strict"

Die Syntax in der Klasse muss im 'strengenden Modus' geschrieben werden.

Wenn Sie die Regeln des 'strengenden Modus' nicht befolgen, erhalten Sie eine Fehlermeldung.

Beispiel

Unter dem 'strengenden Modus' erhalten Sie einen Fehler, wenn Sie eine Variable verwenden, ohne sie zu deklarieren:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Dies funktioniert nicht
    let date = new Date(); // Dies funktioniert
    return date.getFullYear() - this.year;
  }
}

Versuchen Sie es selbst

in JS-strengender Modus Lernen Sie mehr über das 'strengende Modus' hier.