JavaScript-Klassen
ECMAScript 2015, auch bekannt als ES6, führte JavaScript-Klassen ein.
JavaScript-Klassen sind Vorlagen für JavaScript-Objekte.
JavaScript-Klassensyntax
Verwenden Sie das Schlüsselwort class, um eine Klasse zu erstellen.
Fügen Sie immer eine Methode mit dem Namen hinzu constructor():
Syntax
class ClassName {
constructor() { ... }
}
Beispiel
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Das obige Beispiel erstellt eine Klasse namens „Car“.
Die Klasse hat zwei anfängliche Eigenschaften: "Name" und "Jahr".
Eine JavaScript-Klasse ist kein Objekt.
Es ist eine Vorlage für JavaScript-Objekte.
Verwenden einer Klasse
Wenn Sie eine Klasse haben, können Sie die Klasse verwenden, um Objekte zu erstellen:
Beispiel
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
Das obige Beispiel verwendet die Car-Klasse , um zwei Car-Objekte zu erstellen .
Die Konstruktormethode wird automatisch aufgerufen, wenn ein neues Objekt erstellt wird.
Die Konstruktormethode
Die Konstruktormethode ist eine spezielle Methode:
- Es muss den genauen Namen "Konstruktor" haben
- Es wird automatisch ausgeführt, wenn ein neues Objekt erstellt wird
- Es wird verwendet, um Objekteigenschaften zu initialisieren
Wenn Sie keine Konstruktormethode definieren, fügt JavaScript eine leere Konstruktormethode hinzu.
Klassenmethoden
Klassenmethoden werden mit derselben Syntax wie Objektmethoden erstellt.
Verwenden Sie das Schlüsselwort class, um eine Klasse zu erstellen.
Fügen Sie immer eine constructor()Methode hinzu.
Fügen Sie dann beliebig viele Methoden hinzu.
Syntax
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Erstellen Sie eine Klassenmethode namens "age", die das Autoalter 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 =
"My car is " + myCar.age() + " years old.";
Sie können Parameter an Klassenmethoden 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=
"My car is
" + myCar.age(year) + " years old.";
Browser-Unterstützung
Die folgende Tabelle definiert die erste Browserversion mit vollständiger Unterstützung für Klassen in JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
Später in diesem Tutorial erfahren Sie noch viel mehr über JavaScript-Klassen.