1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: Der class-Ausdruck
slug: Web/JavaScript/Reference/Operators/class
tags:
- Classes
- ECMAScript 2015
- Expression
- JavaScript
- Operator
- Reference
translation_of: Web/JavaScript/Reference/Operators/class
---
<div>{{jsSidebar("Operators")}}</div>
<p>Der class-Ausdruck ist eine Methode zur Definition einer Klasse in ECMAScript 2015. Ähnlich wie beim {{jsxref("Operators/function", "function-Ausdruck")}} kann der class-Ausdruck benannt oder unbenannt sein. Ist er benannt, so gilt der Name nur lokal im Klassenkörper. JavaScript-Klassen nutzen prototyp-basierte Vererbung.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] {
// Klassenkörper
};</pre>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Ein class-Ausdruck hat die gleiche Syntax wie die {{jsxref("Statements/class", "class-Anweisung (Deklaration)")}}. Jedoch kann mit dem class-Ausdruck der Klassenname ("binding identifier") ausgelassen werden, was mit der class-Anweisung nicht möglich ist. Zusätzlich erlaubt ein class-Ausdruck das erneute Deklarieren einer Klasse, ohne dass ein Fehler wie bei der {{jsxref("Statements/class", "class-Deklaration")}} auftritt. Die constructor-Eigenschaft ist optional. Zudem wird der <em>typeof</em>-Operator bei so deklarierten Klassen immer den Typ "function" zurückgeben.</p>
<p>Genau wie mit class-Anweisungen wird der Körper der Klasse im {{jsxref("Strict_mode", "strict mode")}} ausgeführt.</p>
<pre class="brush: js">'use strict';
var Foo = class {}; // constructor-Eigenschaft ist optional
var Foo = class {}; // erneute Deklaration is erlaubt
typeof Foo; // gibt "function" zurück
typeof class {}; // gibt "function" zurück
Foo instanceof Object; // true
Foo instanceof Function; // true
class Foo {}; // erzeugt einen TypeError, weil eine erneute Deklaration nicht erlaubt ist
</pre>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Ein_einfacher_Klassenausdruck">Ein einfacher Klassenausdruck</h3>
<p>Dies ist nur ein einfacher anonymer class-Ausdruck der über die "Foo"-Variable angesprochen werden kann.</p>
<pre class="brush: js">var Foo = class {
constructor() {}
bar() {
return "Hello World!";
}
};
var instance = new Foo();
instance.bar(); // "Hello World!"
Foo.name; // ""
</pre>
<h3 id="Benannte_class-Ausdrücke">Benannte class-Ausdrücke</h3>
<p>Wenn Sie innerhalb des Klassenkörpers auf die aktuelle Klasse verweisen möchten, können Sie einen benannten class-Ausdruck verwenden. Dieser Name ist nur im Bereich der Klasse selbst gültig und sichtbar.</p>
<pre class="brush: js">var Foo = class NamedFoo {
constructor() {}
whoIsThere() {
return NamedFoo.name;
}
}
var bar = new Foo();
bar.whoIsThere(); // "NamedFoo"
NamedFoo.name; // ReferenceError: NamedFoo is not defined
Foo.name; // "NamedFoo"
</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>erstmalige 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>Funktion</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>grundlegende Unterstützung</td>
<td>{{CompatChrome(42.0)}}</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>Funktion</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>grundlegende Unterstützung</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(42.0)}}</td>
<td>{{CompatGeckoDesktop(45)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatChrome(42.0)}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{jsxref("Operators/function", "function-Ausdruck")}}</li>
<li>{{jsxref("Statements/class", "class-Anweisung")}}</li>
<li>{{jsxref("Classes", "Klassen")}}</li>
</ul>
|
