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
|
---
title: super
slug: Web/JavaScript/Reference/Operatörler/super
translation_of: Web/JavaScript/Reference/Operators/super
---
<div>{{jsSidebar("Operators")}}</div>
<p><strong>super, </strong>ebeveyn sınıftaki fonksiyonlara ulaşmak ve onları çağırmak için kullanılan bir ifadedir.</p>
<p>The <code>super.prop</code> and <code>super[expr]</code> expressions are valid in any <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definition</a> in both <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>.</p>
<h2 id="Sözdizimi_Syntax">Sözdizimi (Syntax)</h2>
<pre class="syntaxbox notranslate">super([arguments]); // ebeveyn sınıfın constructot'ını çağırır.
super.functionOnParent([arguments]); // ebeveyn sınıftaki functionOnParent fonksiyonunu çalıştırır.
</pre>
<h2 id="Açıklama">Açıklama</h2>
<p>Constructor içinde <code>super</code> ifadesi tek başına kullanılır ve <code>this</code> ifadesinden önce kullanılması zorunludur. Aynı zamanda <code>super</code> ifadesi ebeveyn sınıftaki fonksiyonları çağırmak için de kullanılabilir.</p>
<h2 id="Örnekler">Örnekler</h2>
<h3 id="Sınflarda_super_kullanımı">Sınflarda <code>super</code> kullanımı</h3>
<p>This code snippet is taken from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>). Here <code>super()</code> is called to avoid duplicating the constructor parts' that are common between <code>Rectangle</code> and <code>Square</code>.</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!
// Here, it calls the parent class's constructor with lengths
// provided for the Rectangle'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-calling_static_methods">Super-calling static methods</h3>
<p>You are also able to call super on <a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a> methods.</p>
<pre class="brush: js notranslate">class Rectangle {
static logNbSides() {
return 'I have 4 sides';
}
}
class Square extends Rectangle {
static logDescription() {
return super.logNbSides() + ' which are all equal';
}
}
Square.logDescription(); // 'I have 4 sides which are all equal'
</pre>
<h3 id="Deleting_super_properties_will_throw_an_error">Deleting super properties will throw an error</h3>
<p>You cannot use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a> and <code>super.prop</code> or <code>super[expr]</code> to delete a parent class' property, it will throw a {{jsxref("ReferenceError")}}.</p>
<pre class="brush: js notranslate">class Base {
foo() {}
}
class Derived extends Base {
delete() {
delete super.foo; // this is bad
}
}
new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre>
<h3 id="super.prop_cannot_overwrite_non-writable_properties"><code>super.prop</code> cannot overwrite non-writable properties</h3>
<p>When defining non-writable properties with e.g. {{jsxref("Object.defineProperty")}}, <code>super</code> cannot overwrite the value of the property.</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; // Cannot overwrite the value.
}
}
var y = new Y();
y.foo(); // TypeError: "prop" is read-only
console.log(y.prop); // 1
</pre>
<h3 id="Using_super.prop_in_object_literals">Using <code>super.prop</code> in object literals</h3>
<p>Super can also be used in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> notation. In this example, two objects define a method. In the second object, <code>super</code> calls the first object's method. This works with the help of {{jsxref("Object.setPrototypeOf()")}} with which we are able to set the prototype of <code>obj2</code> to <code>obj1</code>, so that <code>super</code> is able to find <code>method1</code> on <code>obj1</code>.</p>
<pre class="brush: js notranslate">var obj1 = {
method1() {
console.log('method 1');
}
}
var obj2 = {
method2() {
super.method1();
}
}
Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"
</pre>
<h2 id="Özellikler">Özellikler</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
</tr>
</tbody>
</table>
<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2>
<p>{{Compat("javascript.operators.super")}}</p>
<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
</ul>
|
