JavaScript-Klassen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

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 constructor() hinzu:

Syntax

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

Beispiel

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.


Verwenden einer Klasse

Wenn Sie eine Klasse haben, können Sie diese zum Erstellen von Objekten verwenden:

Beispiel

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

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

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 mit dem Namen „age“, die das Alter des Autos zurückgibt:

Beispiel

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:

Beispiel

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>

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 viel mehr über JavaScript-Klassen.