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
|
---
title: super
slug: Web/JavaScript/Referencje/Operatory/super
translation_of: Web/JavaScript/Reference/Operators/super
---
<div>{{jsSidebar("Operators")}}</div>
<p>Słowo kluczowe <strong>super </strong>jest wykorzystywane do udostępniania i korzystania z funkcji klasy po której nasz obiekt dziedziczy.</p>
<p>Wyrażenia <code>super.prop</code> i <code>super[expr]</code> są poprawne w każdej definicji metody zarówno w <a href="/pl/docs/Web/JavaScript/Reference/Classes">klasach</a> i <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer">literałach obiektowych</a>.</p>
<h2 id="Składnia">Składnia</h2>
<pre class="syntaxbox notranslate">super([arguments]); // wywołuje konstruktor klasy rodzica
super.functionOnParent([arguments]);
</pre>
<h2 id="Opis">Opis</h2>
<p>W przypadku użycia w konstruktorze, słowo kluczowe <code>super</code> pojawia się samodzielnie i musi zostać użyte przed użyciem słowa kluczowego <code>this</code> . Słowo kluczowe <code>super</code> można również wykorzystać do wywoływania funkcji które nasz obiekt odziedziczył po swoim rodzicu.</p>
<h2 id="Przykład">Przykład</h2>
<h3 id="Użycie_super_w_klasach">Użycie <code>super</code> w klasach</h3>
<p>Poniższy snippet został pobrany z <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">próbki klasy</a> (live demo). W tym przykładzie, super() jest wywoływane w celu uniknięcia powielania tych części konstruktora, które są wspólne zarówno dla <code>Rectangle</code> (trójkąta) jak i <code>Square</code> (kwadratu).</p>
<pre class="brush: js notranslate">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._area = value;
}
}
class Square extends Rectangle {
constructor(length) {
this.height; // ReferenceError, super needs to be called first!
// Wywołanie konstruktora klasy nadrzędnej
// określenie szerokości i wysokości prostokąta
super(length, length);
// Uwaga: W pochodnych klasach, super() musi być wywołane wcześniej niż
// pierwsze użycie 'this'. W przeciwnym wypadku pojawi się błąd odniesienia.
this.name = 'Square';
}
}</pre>
<h3 id="Super-wywołanie_metod_statycznych">Super-wywołanie metod statycznych</h3>
<p>Za pomocą <code>super</code> jesteś w stanie także wywołać metody statyczne.</p>
<pre class="brush: js notranslate">class Rectangle {
constructor() {}
static logNbSides() {
return 'I have 4 sides';
}
}
class Square extends Rectangle {
constructor() {}
static logDescription() {
return super.logNbSides() + ' which are all equal';
}
}
Square.logDescription(); // 'I have 4 sides which are all equal'
</pre>
<h3 id="Usuwanie_właściwości_z_super_wyrzuci_błąd">Usuwanie właściwości z super wyrzuci błąd</h3>
<p>Nie możesz użyć <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_delete">operatora usuwania</a> oraz <code>super.prop</code> bądź <code>super[expr]</code> w celu usunięcia właściwości klasy rodzica ponieważ zostanie zwrócony błąd {{jsxref("ReferenceError")}}.</p>
<pre class="brush: js notranslate">class Base {
constructor() {}
foo() {}
}
class Derived extends Base {
constructor() {}
delete() {
delete super.foo; // to jest niepoprawnie
}
}
new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre>
<h3 id="super.prop_nie_może_nadpisać_właściwości_typu_non-writable"><code>super.prop</code> nie może nadpisać właściwości typu non-writable </h3>
<p>Definiując właściwości non-writable (niezapisywalne) np. {{jsxref("Object.defineProperty")}}, pamiętaj, że <code>super</code> nie może nadpisać takiej wartości.</p>
<pre class="brush: js notranslate">class X {
constructor() {
Object.defineProperty(this, 'prop', {
configurable: true,
writable: false,
value: 1
});
}
}
class Y extends X {
constructor() {
super();
}
foo() {
super.prop = 2; // Nie można nadpisać wartości
}
}
var y = new Y();
y.foo(); // TypeError: "prop" is read-only
console.log(y.prop); // 1
</pre>
<h3 id="Używanie_super.prop_w_literałach_obiektowych">Używanie <code>super.prop</code> w literałach obiektowych</h3>
<p><code>super</code> może być także wykorzystane <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer">inicjalizatorze / literale obiektu</a>.</p>
<p>W tym przykładzie dwa obiekty definiują swoją metodę. W drugim obiekcie, <code>super</code> wywołuje metodę obiektu pierwszego. To działa dzięki {{jsxref("Object.setPrototypeOf()")}} z czym jesteśmy w stanie ustawić prototyp obiektu <code>obj2</code> na <code>obj1</code>, tak aby <code>super</code><span> było w stanie znaleźć metodę </span><code>method1</code><span> </span>w obiekcie <code>obj1</code><span>. </span></p>
<pre class="brush: js notranslate">var obj1 = {
method1() {
console.log('method 1');
}
}
var obj2 = {
method2() {
super.method1();
}
}
Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // wypisze "method 1"
</pre>
<h2 id="Specyfikacje">Specyfikacje</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specyfikacja</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
</tr>
</tbody>
</table>
<h2 id="Kompatybilność">Kompatybilność</h2>
<p>{{Compat("javascript.operators.super")}}</p>
<h2 id="Zobacz_też">Zobacz też</h2>
<ul>
<li><a href="/pl/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
<li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li>
</ul>
|
