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
|
---
title: super
slug: Web/JavaScript/Referencia/Operadores/super
tags:
- Clases
- ECMAScript 2015
- JavaScript
- Operador
translation_of: Web/JavaScript/Reference/Operators/super
---
<div>{{jsSidebar("Operators")}}</div>
<p>La palabra clave <strong>super</strong> es usada para acceder y llamar funciones del padre de un objeto.</p>
<p>Las expresiones <code>super.prop</code> y <code>super[expr]</code> son válidas en cualquier <a href="/es/docs/Web/JavaScript/Reference/Functions/Method_definitions">definición de método</a> tanto para <a href="/es/docs/Web/JavaScript/Reference/Classes">clases</a> como para <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">objetos literales</a>.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">// llama al método constructor del objeto padre.
super([arguments]);
// llama cualquier otro método del objeto padre.
super.functionOnParent([arguments]);
</pre>
<h2 id="Descripción">Descripción</h2>
<p>Cuando es usado en un constructor, la palabra clave <code>super</code> aparece sola lo cual invoca el constructor del objeto padre. En este caso debe usarse antes de que la palabra clave <code>this</code> sea usada. La palabra clave <code>super</code> también puede utilizarse para llamar otras funciones del objeto padre.</p>
<h2 id="Ejemplo">Ejemplo</h2>
<h3 id="Usando_super_en_clases">Usando <code>super</code> en clases</h3>
<p>Este fragmento de código se toma del <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">ejemplo de clases</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">demo en vivo</a>). Aquí se llama a <code>super()</code> para evitar la duplicación de las partes del constructor que son comunes entre <code>Rectangle</code> y <code>Square</code>.</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 necesita ser llamado primero!
// Aquí, llama al constructor de la clase padre con las longitudes
// previstas para el ancho y la altura de Rectangle
super(length, length);
// Nota: En las clases derivadas, se debe llamar a super() antes de
// poder usar 'this'. Salir de esto provocará un error de referencia.
this.name = 'Square';
}
}</pre>
<h3 id="Super-llamando_a_métodos_estáticos">Super-llamando a métodos estáticos</h3>
<p>También puede llamar a super en métodos estáticos.</p>
<pre class="brush: js">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(); // 'Tengo 4 lados que son todos iguales'
</pre>
<h3 id="Eliminar_propiedades_super_generará_un_error">Eliminar propiedades <code>super</code> generará un error</h3>
<p>No puede usar el <a href="/es/docs/Web/JavaScript/Reference/Operators/delete">operador de eliminación</a> y <code>super.prop</code> o <code>super[expr]</code> para eliminar la propiedad de una clase principal, lanzará {{jsxref("ReferenceError")}}.</p>
<pre class="brush: js">class Base {
constructor() {}
foo() {}
}
class Derived extends Base {
constructor() {}
delete() {
delete super.foo; // esto es malo
}
}
new Derived().delete(); // ReferenceError: eliminación no válida que implica 'super'. </pre>
<h3 id="super.prop_no_puede_sobrescribir_las_propiedades_no_modificables"><code>super.prop</code> no puede sobrescribir las propiedades no modificables</h3>
<p>Al definir propiedades que no se pueden escribir, p. Ej. {{jsxref("Object.defineProperty")}}, <code>super</code> no puede sobrescribir el valor de la propiedad.</p>
<pre class="brush: js">class X {
constructor() {
Object.defineProperty(this, 'prop', {
configurable: true,
writable: false,
value: 1
});
}
f() {
super.prop = 2;
}
}
var x = new X();
x.f(); // TypeError: "prop" es de solo lectura
console.log(x.prop); // 1
</pre>
<h3 id="Usando_super.prop_en_objetos_literales">Usando <code>super.prop</code> en objetos literales</h3>
<p>Super también se puede usar en el <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">inicializador de objetos / notación literal</a>. En este ejemplo, dos objetos definen un método. En el segundo objeto, <code>super</code> llama al primer método del objeto. Esto funciona con la ayuda de {{jsxref("Object.setPrototypeOf()")}} con el que podemos establecer el prototipo de <code>obj2</code> en <code>obj1</code>, de modo que <code>super</code> pueda encontrar el <code>method1</code> en <code>obj1</code>.</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="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Definición inicial.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{Compat("javascript.operators.super")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/es/docs/Web/JavaScript/Reference/Classes">Clases</a></li>
</ul>
|
