diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/javascript/reference/statements/class | |
parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip |
initial commit
Diffstat (limited to 'files/de/web/javascript/reference/statements/class')
-rw-r--r-- | files/de/web/javascript/reference/statements/class/index.html | 192 |
1 files changed, 192 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/statements/class/index.html b/files/de/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..48fda4c9bb --- /dev/null +++ b/files/de/web/javascript/reference/statements/class/index.html @@ -0,0 +1,192 @@ +--- +title: Klasse +slug: Web/JavaScript/Reference/Statements/class +tags: + - Deklaration + - ECMAScript 2015 + - JavaScript + - Klasse + - Klassen + - Ref + - Statement +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>Die <strong>Klassendeklaration </strong>erstellt eine neue Klasse mit einem Namen unter Verwendung von prototypen Vererbung.</div> + +<div> </div> + +<div class="noinclude"> +<p>Sie können eine Klasse auch mit Hilfe einer {{jsxref("Operators/class", "class expression", "", 1)}} definieren. Unglücklicherweise ist es mit diesen class-Ausdrücken nicht möglich eine existierende Klasse erneut zu deklarieren. Dieses führt zu einem TypeError.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">class <em>name</em> [extends] { + // class body +} +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Genau wie mit class expressions, wird der body der Klassendeklaration im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode"><u><font color="#0066cc">strict mode</font></u></a> ausgeführt. Die constructor Eigenschaft ist optional.</p> + +<p>Klassendeklarationen sind nicht {{Glossary("Hoisting", "hoisted")}} (im Gegensatz zu <a href="/de/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>).</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Eine_einfache_Klassendeklaration">Eine einfache Klassendeklaration</h3> + +<p>Im folgenden Beispiel definieren wir zuerst eine Klasse mit dem Namen Polygon. Diese wird danach erweitert, um eine Klasse mit dem Namen Square zu erstellen. Beachten Sie, dass die Anweisung<code> super() </code>nur im Konstruktor verwendet werden kann und vor dem <code>this </code>Schlüsselwort verwendet werden kann.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<div class="warning"> +<h3 id="Versuch_eine_Klasse_zweimal_zu_deklarieren">Versuch eine Klasse zweimal zu deklarieren</h3> + +<p>Neudeklarieren einer Klasse unter Einsatz von Klassendeklarationen führt zu einem TypeError.</p> + +<pre class="brush: js">class Foo {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared +</pre> + +<p>Der gleiche Fehler tritt auch auf, wenn eine Klasse zuvor mit einem class-Ausdruck definiert wurde.</p> + +<pre class="brush: js">var Foo = class {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared +</pre> +</div> + +<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>Erste 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>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> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </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>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</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/Classes">Classes</a></li> +</ul> |