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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
---
title: super
slug: Web/JavaScript/Reference/Operators/super
tags:
- Classes
- ECMAScript 2015
- JavaScript
- Left-hand-side expression
- Operator
translation_of: Web/JavaScript/Reference/Operators/super
---
<div>{{jsSidebar("Operators")}}</div>
<div>Das <strong>super</strong> Schlüsselwort wird verwendet, um Funktionen in einem Vaterobjekt auszuführen.</div>
<div> </div>
<div>Die <code>super.prop</code> und <code>super[expr]</code> Ausdrücke sind in allen <a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a> von <a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a> und <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objekt Literalen</a> verfügbar.</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">super([arguments]); // calls the parent constructor.
super.functionOnParent([arguments]);
</pre>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Wenn ein Konstruktor verwendet wird, muss das <code>super</code> Schlüsselwort verwendet werden, bevor das <code>this</code> Schlüsselwort verwendet werden kann. Mit dem <code>super</code> Schlüsselwort kann man auch Funktionen im Vaterobjekt ausführen.</p>
<h2 id="Beispiel">Beispiel</h2>
<h3 id="super_in_Klassen_verwenden"><code>super</code> in Klassen verwenden</h3>
<p>Der Codeabschnitt ist 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>). Hier wird <code>super()</code> aufgerufen, um das duplizieren von Teilen des Konstruktors zu vermeiden, was zwischen <code>Rectangle</code> und <code>Square</code> üblich ist.</p>
<pre class="brush: js">class Rectangle {
constructor(height, width) {
this.name = 'Rectangle';
this.height = height;
this.width = width;
}
sayName() {
console.log('Hi, I am a ', this.name + '.');
}
get area() {
return this.height * this.width;
}
set area(value) {
this.height = this.width = Math.sqrt(value);
}
}
class Square extends Rectangle {
constructor(length) {
this.height; // ReferenceError, super needs to be called first!
// Here, it calls the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
this.name = 'Square';
}
}</pre>
<h3 id="super_Aufruf_in_statischen_Methoden"><code>super</code> Aufruf in statischen Methoden</h3>
<p><code>super</code> kann auch in <a href="/de/docs/Web/JavaScript/Reference/Classes/static">statischen</a> Methoden verwendet werden.</p>
<pre class="brush: js">class Rectangle {
constructor() {}
static logNbSides() {
return 'I habe 4 sides';
}
}
class Square extends Rectangle {
constructor() {}
static logDescription() {
return super.logNbSides() + ' wich are all equal';
}
}
Square.logDescription(); // 'I habe 4 sides wich are all equal'
</pre>
<h3 id="Das_Löschen_von_Supereigenschaften_erzeugt_einen_Fehler">Das Löschen von Supereigenschaften erzeugt einen Fehler</h3>
<p>Man kann den <a href="/de/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> Operator</a> in Verbindung mit <code>super.prop</code> oder <code>super[expr]</code> nicht einsetzen, um Eigenschaften zu löschen, es führt zu einem {{jsxref("ReferenceError")}}.</p>
<pre class="brush: js">class Base {
constructor() {}
foo() {}
}
class Derived extends Base {
constructor() {}
delete() {
delete super.foo;
}
}
new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre>
<h3 id="super.prop_kann_keine_schreibgeschützten_Eigenschaften_überschreiben"><code>super.prop</code> kann keine schreibgeschützten Eigenschaften überschreiben</h3>
<p>Wenn eine schreibgeschützte Eigenschaft mit z.B. {{jsxref("Object.defineProperty")}}" erzeugt wird, kann der Wert nicht mit <code>super</code> überschrieben werden.</p>
<pre class="brush: js">class X {
constructor() {
Object.defineProperty(this, "prop", {
configurable: true,
writable: false,
value: 1
});
}
}
class Y extends X {
constructor() {
super();
}
foo() {
super.prop = 2; // Der Wert kann nicht überschrieben werden
}
}
var y = new Y();
x.foo(); // TypeError: "prop" is read-only
console.log(y.prop); // 1
</pre>
<h3 id="Nutzen_von_super.prop_in_Objektliteralen">Nutzen von <code>super.prop</code> in Objektliteralen</h3>
<p>super kann auch in der <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> Notation verwendet werden. In diesem Beispiel definieren zwei Objekte eine Methode. Im zweiten Beispiel wird mit <code>super</code> die Funktion im ersten Objekt aufgerufen. Das funktioniert mit Hilfe von {{jsxref("Object.setPrototypeOf()")}}. Damit ist es möglich den Prototypen von <code>obj2</code> auf <code>obj1</code> zu setzen, damit <code>super method1</code> in <code>obj1</code> findet.</p>
<pre class="brush: js">var obj1 = {
method1() {
console.log("method 1");
}
}
var obj2 = {
method2() {
super.method1();
}
}
Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"
</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-super-keyword', 'super')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initiale Definition</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("javascript.operators.super")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a></li>
</ul>
|
