ECMAScript 2015, auch bekannt als ES6, führte JavaScript-Klassen ein.
JavaScript-Klassen sind Vorlagen für JavaScript-Objekte.
Verwenden Sie das Schlüsselwort class
, um eine Klasse zu erstellen.
Fügen Sie immer eine Methode mit dem Namen constructor()
hinzu:
class ClassName {
constructor() { ... }
}
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Das obige Beispiel erstellt eine Klasse mit dem Namen „Car“.
Die Klasse verfügt über zwei Anfangseigenschaften: „name“ und „year“.
Eine JavaScript-Klasse ist kein ein Objekt.
Es ist eine Vorlage für JavaScript-Objekte.
Wenn Sie eine Klasse haben, können Sie diese zum Erstellen von Objekten verwenden:
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>
<p id="demo"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>
</body>
</html>
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 ist eine spezielle Methode:
Es muss den genauen Namen „Konstruktor“ haben
Es wird automatisch ausgeführt, wenn ein neues Objekt erstellt wird
Es wird zum Initialisieren von Objekteigenschaften verwendet
Wenn Sie keine Konstruktormethode definieren, JavaScript fügt eine leere Konstruktormethode hinzu.
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.
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Erstellen Sie eine Klassenmethode mit dem Namen „age“, die das Alter des Autos zurückgibt:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
const date = new Date();
return date.getFullYear() - this.year;
}
}
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Methods</h1>
<p>How to define and use a Class method.</p>
<p id="demo"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
const date = new Date();
return date.getFullYear() - this.year;
}
}
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>
</body>
</html>
Sie können Parameter an Klassenmethoden senden:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
const date = new Date();
let year = date.getFullYear();
const myCar = new
Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is
" + myCar.age(year) + " years old.";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Method</h1>
<p>Pass a parameter into the "age()" method.</p>
<p id="demo"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
const date = new Date();
let year = date.getFullYear();
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>
</body>
</html>
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 viel mehr über JavaScript-Klassen.