Merge pull request #55 from fiji-flo/unslugging-de

Unslugging de

4 files changed, 853 insertions, 0 deletions

diff --git a/files/de/web/javascript/reference/classes/constructor/index.html b/files/de/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..85eadbc22c
--- /dev/null
+++ b/files/de/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,166 @@
+---
+title: Konstruktor
+slug: Web/JavaScript/Reference/Classes/constructor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Klassen
+translation_of: Web/JavaScript/Reference/Classes/constructor
+original_slug: Web/JavaScript/Reference/Klassen/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Die <code>constructor</code> Methode ist eine spezielle Methode für das erzeugen und initialisieren von Objekten, die mit dem Schlüsselwort <code>class </code>erzeugt wurden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">constructor([Argumente]) { ... }</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>In einer Klasse kann es nur eine Methode mit dem Namen "constructor" geben. Eine {{jsxref("SyntaxError")}} Fehlermeldung wird geworfen, wenn in einer Klasse die <code>constructor</code> Methode mehr als einmal vorhanden ist.</p>
+
+<p>Die <code>constructor </code>Methode kann mit dem Schlüsselwort <code>super </code>die <code>constructor </code>Methode der Eltern-Klasse aufrufen.</p>
+
+<p>Wenn man keine <code>constructor </code>Methode erzeugt, wird eine Standardkonstruktor verwendet.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_der_constructor_Methode">Verwendung der <code>constructor</code> Methode</h3>
+
+<p>Dieser Quellcode Ausschnitt wurden vom  <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes Beispiel</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live Demo</a>) übernommen.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
+    // für die Parameter width und height wurde der übergebene length Parameter verwendet
+    super(length, length);
+    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
+    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Standardkonstruktoren">Standardkonstruktoren</h3>
+
+<p>Wenn man keine <code>constructor </code>Methode anlegt, wird eine Standardkonstruktor verwendet. Für Basis Klassen ist der Standard Konstruktor:</p>
+
+<pre class="brush: js">constructor() {}
+</pre>
+
+<p>Für vererbte Klassen, ist das der Standardkonstruktor:</p>
+
+<pre class="brush: js">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Default constructors</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Default constructors</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/classes/extends/index.html b/files/de/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..bc797f0d46
--- /dev/null
+++ b/files/de/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,173 @@
+---
+title: Erweitern
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/extends
+original_slug: Web/JavaScript/Reference/Klassen/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Das <strong><code>extends</code></strong> Schlüsselwort wird in einer <a href="/de/docs/Web/JavaScript/Reference/Statements/class">Klassendeklaration </a>oder in einem <a href="/de/docs/Web/JavaScript/Reference/Operators/class">Klassenausdruck </a>verwendet, um eine, von einer anderen Klasse, abgeleitete Klasse zu erzeugen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">class KindKlasse extends ElternKlasse { ... }</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das Schlüsselwort <code>extends</code> kann verwendet werden, um von selbst erstellen Klassen als auch von standardmäßig eingebaute Objekte abzuleiten.</p>
+
+<p>Das <code>prototype</code> Objekt, des zu erweiternden Objekt, muss entweder von Typ {{jsxref("Object")}} oder{{jsxref("null")}} sein.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_extends">Verwendung von <code>extends</code></h3>
+
+<p>Das erste Beispiel erzeugt einen Klasse mit dem Namen <code>Square,</code> die von der Klasse <code>Polygon</code> abgeleitet ist. Dieses Beispiel wurde aus dieser <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live Demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(Quellcode)</a> entnommen.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
+    // für die Parameter width und height wurde der übergebene length Parameter verwendet
+    super(length, length);
+    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
+    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Verwendung_mit_standardmäßig_eingebautem_Objekt">Verwendung mit standardmäßig eingebautem Objekt</h3>
+
+<p>In diesem Beispiel wird das standardmäßig eingebaute {{jsxref("Date")}} Objekt erweitert. Dieses Beispiel wurde aus dieser <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live Demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(Quellcode)</a> entnommen.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="Ableiten_von_null">Ableiten von <code>null</code></h3>
+
+<p>Das Ableiten von {{jsxref("null")}} funktioniert genauso wie mit jeder anderen Klasse, mit der Ausnahme, dass das <code>prototype</code> Objekt nicht von {{jsxref("Object.prototype")}} abgeleitet ist.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/classes/index.html b/files/de/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..cbafc60a14
--- /dev/null
+++ b/files/de/web/javascript/reference/classes/index.html
@@ -0,0 +1,377 @@
+---
+title: Klassen
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Klassen
+  - Konstruktor
+  - Vererbung
+translation_of: Web/JavaScript/Reference/Classes
+original_slug: Web/JavaScript/Reference/Klassen
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<div>JavaScript Klassen, eingeführt in ECMAScript 2015, sind syntaktischer Zucker für das bestehende, auf Prototypen basierende, Vererbungsmodell von JavaScript. Diese Syntaxerweiterung führt <strong>kein</strong> neues OOP-Modell in die Sprache ein. JS Klassen ermöglichen es, mit klarer und verständlicher Syntax Objekte zu erstellen und Vererbung in Javascript zu realisieren.</div>
+
+<h2 id="Klassendefinition">Klassendefinition</h2>
+
+<p>Klassen sind eigentlich Funktionen. Analog zu Funktionsausdrücken und Funktionsdeklarationen hat die Klassensyntax zwei Komponenten:</p>
+
+<ul>
+ <li>Klassenausdrücke und</li>
+ <li>Klassendeklarationen.</li>
+</ul>
+
+<h3 id="Klassendeklaration">Klassendeklaration</h3>
+
+<p>Eine Möglichkeit, Klassen zu definieren ist eine <em>Klassendeklaration</em>. Diese wird eingeleitet durch das Schlüsselwort <code>class</code>, gefolgt vom Namen der Klasse (hier: "Rectangle").</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<h4 id="Hoisting">Hoisting</h4>
+
+<p>Ein wichtiger Unterschied zwischen <em>Klassen-</em> und <em>Funktionsdeklarationen</em> besteht im sogenannten {{Glossary("Hoisting")}}. Funktionsdeklarationen werden an den Anfang des Definitionsbereichs "gehoben", für Klassen gilt dies nicht. Das heißt, um auf eine Klasse zuzugreifen, muss sie zuvor definiert worden sein, sonst führt dies zu einem {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+</pre>
+
+<h3 id="Klassenausdruck">Klassenausdruck</h3>
+
+<p>Ein <em>Klassenausdruck</em> ist eine weitere Möglichkeit eine Klasse zu definieren. Dabei ist es optional, hinter dem Schlüsselwort <code>class</code> einen Namen anzugeben. Sollte ein Name angegeben werden, so gilt dieser nur innerhalb des Klassenkörpers.</p>
+
+<pre class="brush: js">// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+</pre>
+
+<h2 id="Klassenkörper_und_Methodendefinitionen">Klassenkörper und Methodendefinitionen</h2>
+
+<p>Der Körper der Klasse ist innerhalb der beiden geschweiften Klammern <code>{}</code>. Hier werden die Eigenschaften der Klasse definiert, wie Konstruktoren oder Methoden.</p>
+
+<h3 id="Strict_mode">"Strict mode"</h3>
+
+<p>Der Inhalt der Klassendeklaration und des Klassenausdrucks werden im "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strikten Modus</a>" ausgeführt.</p>
+
+<h3 id="Konstruktor">Konstruktor</h3>
+
+<p>Die <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Klassen/constructor">Konstruktor</a>-Methode ist eine spezielle Methode, um Objekte zu erzeugen und zu initialisieren. Eine Klasse kann nur eine spezielle Methode mit dem Namen "constructor" haben. Sollte es in einer Klasse mehrere "constructor"-Methoden geben, wird ein {{jsxref("SyntaxError")}} geworfen.</p>
+
+<p>In der Konstruktor-Methode kann man mit dem Schlüsselwort "super", den Konstruktor der Elternklasse aufrufen.</p>
+
+<h3 id="Prototype_Methoden">Prototype Methoden</h3>
+
+<p>Siehe auch <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a>.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(hoehe, breite) {
+    this.hoehe = hoehe;
+    this.breite = breite;
+  }
+
+  get flaeche() {
+    return this.berechneFlaeche();
+  }
+
+  berechneFlaeche() {
+    return this.hoehe * this.breite;
+  }
+}
+
+const quadrat = new Polygon(10, 10);
+
+console.log(quadrat.flaeche);</pre>
+
+<h3 id="Statische_Methoden">Statische Methoden</h3>
+
+<p>Das Schlüsselwort <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> definiert statische Methoden. Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in Applikationen statische Methoden für Hilfsfunktionen verwendet.</p>
+
+<pre class="brush: js">class Punkt {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static laenge(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Punkt(5, 5);
+const p2 = new Punkt(10, 10);
+
+console.log(Punkt.laenge(p1, p2));</pre>
+
+<h3 id="Boxing_with_prototype_and_static_methods">Boxing with prototype and static methods</h3>
+
+<p>Wird eine statische oder eine prototype-Methode aufgerufen, ohne dass ein Objekt in der Variable "this" liegt (oder mit "this" als Wahrheitswert, Zeichenkette, Nummer, undefiniert oder null), dann wird die Variable "this" im Funktionskörper undefined sein. Autoboxing wird nicht passieren. Das Verhalten wird das gleiche sein, sollte der Code nicht im "strict mode" geschrieben worden sein.</p>
+
+<pre class="brush: js">class Tier {
+  sprich() {
+    return this;
+  }
+  static iss() {
+    return this;
+  }
+}
+
+let obj = new Tier();
+let sprich = obj.sprich;
+sprich(); // undefined
+
+let iss = Tier.iss;
+iss(); // undefined</pre>
+
+<p>Falls wir den vorherigen Quelltext mit klassischen funktionsbasierten Klassen schreiben, wird Autoboxing stattfinden. Dies wird auf dem Wert passieren, der für "this" an die Funktion übergeben wurde.</p>
+
+<pre class="brush: js">function Tier() { }
+
+Tier.prototype.sprich = function() {
+  return this;
+}
+
+Tier.iss = function() {
+  return this;
+}
+
+let obj = new Tier();
+let sprich = obj.sprich;
+sprich(); // Globales Objekt
+
+let iss = Tier.iss;
+iss(); // Globales Objekt</pre>
+
+<h2 id="Vererbung_mittels_extends">Vererbung mittels <code>extends</code></h2>
+
+<p>Das Schlüsselwort <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> wird dafür verwendet, Klassendeklarationen und Klassenausdrücke zu erzeugen, die von einer anderen Klasse ableiten.</p>
+
+<pre class="brush: js">class Tier{
+  constructor(name) {
+    this.name = name;
+  }
+
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+}
+
+class Hund extends Tier{
+  sprich() {
+    console.log(this.name + ' bellt.');
+  }
+}
+
+var h = new Hund('Wolfi');
+h.sprich();
+</pre>
+
+<p>Existiert in der Unterklasse ein Konstruktor, muss dieser zuerst super() aufrufen, bevor "this" verwendet werden kann.</p>
+
+<p>Man kann auch traditionelle funktionsbasierte Klassen erweitern:</p>
+
+<pre class="brush: js">function Tier(name) {
+  this.name = name;
+}
+Tier.prototype.sprich = function () {
+  console.log(this.name + ' macht ein Geräusch.');
+}
+
+class Hund extends Tier {
+  sprich() {
+    super.sprich();
+    console.log(this.name + ' bellt.');
+  }
+}
+
+var h = new Hund('Wolfi');
+h.sprich();</pre>
+
+<p>Klassen können nicht von regulären (nicht konstruierbaren) Objekten erben. Falls von einem regulärem Objekt geerbt werden soll, kann {{jsxref("Object.setPrototypeOf()")}} verwendet werden:</p>
+
+<pre class="brush: js">var Tier = {
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+};
+
+class Hund {
+  constructor(name) {
+    this.name = name;
+  }
+  sprich() {
+    console.log(this.name + ' bellt.');
+  }
+}
+
+Object.setPrototypeOf(Hund.prototype, Tier);
+
+var h = new Hund('Wolfi');
+h.sprich();</pre>
+
+<h2 id="Species">Species</h2>
+
+<p>Falls man zum Beispiel in einer selbst erzeugten Klasse <code>MyArray</code> den Konstruktor mit dem Konstruktor der {{jsxref("Array")}} Klasse überschreiben will, kann man dies mittels des species Musters erreichen.</p>
+
+<p>Zum Beispiel, wenn man die {{jsxref("Array.map", "map()")}} Methode aufruft, wird der Default-Konstruktor der Klasse aufgerufen. Will man, dass stattdessen der Konstruktor der Elternklasse benutzt wird, kann man das {{jsxref("Symbol.species")}}-Symbol dafür verwenden:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // Überschreibt species mit dem Konstruktor der Array-Klasses
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true</pre>
+
+<h2 id="Elternklasse_Methoden_mit_super_aufrufen">Elternklasse Methoden mit <code>super</code> aufrufen</h2>
+
+<p>Das Schlüsselwort <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> kann verwendet werden, um Methoden der Elternklassen aufzurufen</p>
+
+<pre class="brush: js">class Katze{
+  constructor(name) {
+    this.name = name;
+  }
+
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+}
+
+class Loewe extends Katze {
+  sprich() {
+    super.sprich();
+    console.log(this.name + ' brüllt.');
+  }
+}</pre>
+
+<h2 id="Mix-ins">Mix-ins</h2>
+
+<p>Abstrakte Subklassen oder <em>mix-ins</em> sind Vorlagen für Klassen. Eine ECMAScript-Klasse kann nur von einer einzigen Klasse ableiten, damit ist beispielsweise mehrfache Vererbung von Helferklassen nicht möglich. Die gewünschte Funktionalität muss von der Elternklasse bereitgestellt werden.</p>
+
+<p>Eine Funktion die als Input eine Elternklasse nimmt und als Output eine davon abgeleitete Subklasse ausgibt, kann verwendet werden, um mix-ins in ECMAScript zu erzeugen:</p>
+
+<pre class="brush: js">var RechnerMixin = Base =&gt; class extends Base {
+  rechne() { }
+};
+
+var ZufallsGeneratorMixin = Base =&gt; class extends Base {
+  generiere() { }
+};</pre>
+
+<p>Eine Klasse die ein solches mix-in verwendet kann so erzeugt werden:</p>
+
+<pre class="brush: js">class Foo { }
+class Bar extends RechnerMixin(ZufallsGeneratorMixin(Foo)) { }</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>13</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(9.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome für Android</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Benötigt den strikten Modus. Der Support im nicht-strikte Modus verbirgt sich hinter der Flag "Experimentelle JavaScript-Funktionen", welche standardmäßig deaktiviert ist.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Guide/Funktionen")}}</li>
+ <li>{{jsxref("Statements/class")}}</li>
+ <li>{{jsxref("Operators/class")}}</li>
+ <li>{{jsxref("Operators/super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/classes/static/index.html b/files/de/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..f9ba577d7b
--- /dev/null
+++ b/files/de/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,137 @@
+---
+title: Statische Methoden
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Static
+translation_of: Web/JavaScript/Reference/Classes/static
+original_slug: Web/JavaScript/Reference/Klassen/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Das <code><strong>static</strong></code> Schüsselwort definiert statische Methoden für eine Klasse.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">static methodenName() { ... }</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in statische Methoden für Hilfsfunktionen verwendet.</p>
+
+<h2 id="Aufruf_von_statischen_Methoden">Aufruf von statischen Methoden</h2>
+
+<h3 id="Von_einer_anderen_statischen_Methode">Von einer anderen statischen Methode</h3>
+
+<p>Um eine statische Methode aus einer anderen statischen Methode der gleichen Klasse aufzurufen, kann das <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> Schlüsselwort verwendet werden.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+    static staticMethod() {
+        return 'Static method has been called';
+    }
+    static anotherStaticMethod() {
+        return this.staticMethod() + ' from another static method';
+    }
+}
+StaticMethodCall.staticMethod();
+// 'Static method has been called'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Static method has been called from another static method'</pre>
+
+<h3 id="Für_Klassenkonstruktoren_und_anderen_Methoden">Für Klassenkonstruktoren und anderen Methoden</h3>
+
+<p>Statische Methoden sind mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> Schlüsselwort nicht direkt erreichbar von nicht statischen Methoden. Man kann sie mit dem Klassennamen aufrufen: <code>KLASSENNAME.STATISCH_METHODE_NAME</code> oder mit der Aufrufen einer Eigenschaft von <code>constructor</code>: <code>this.constructor.</code><code>STATISCH_METHODE_NAME</code>.</p>
+
+<pre class="brush: js">class StaticMethodCall{
+    constructor(){
+        console.log(StaticMethodCall.staticMethod());
+        // 'static method has been called'
+
+        console.log(this.constructor.staticMethod());
+        // 'static method has been called'
+    }
+
+    static  staticMethod(){
+        return 'static method has been called.';
+    }
+}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel demonstriert mehrere Dinge:</p>
+
+<ol>
+ <li>Wie eine statische Methode in einer Klasse implementiert wird.</li>
+ <li>Das von einer Klasse mit statischen Eigenschaften geerbt werden kann.</li>
+ <li>Wie eine statische Methode aufgerufen werden kann und wie nicht.</li>
+</ol>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (not affected by parent's instantiation)
+
+console.log(tp.triple());
+// 'tp.triple is not a function'.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>