diff options
Diffstat (limited to 'files/es/web/javascript/referencia/classes/extends/index.html')
| -rw-r--r-- | files/es/web/javascript/referencia/classes/extends/index.html | 167 |
1 files changed, 0 insertions, 167 deletions
diff --git a/files/es/web/javascript/referencia/classes/extends/index.html b/files/es/web/javascript/referencia/classes/extends/index.html deleted file mode 100644 index 6781c3801e..0000000000 --- a/files/es/web/javascript/referencia/classes/extends/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: extends -slug: Web/JavaScript/Referencia/Classes/extends -translation_of: Web/JavaScript/Reference/Classes/extends ---- -<div>{{jsSidebar("Classes")}}</div> - -<p>La palabra clave <strong>extends</strong> es usada en la <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">declaración</a> o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">expresión</a> de clases, para crear una clase hija de otra.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>La palabra clave <code>extends</code> se puede usar para crear una subclase a partir de clases personalizadas, así como sus objetos incorporados.</p> - -<p>La propiedad <code>.prototype</code> de la nueva subclase debe ser un {{jsxref("Object")}} o {{jsxref("null")}}.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Como_usar_extends">Como usar <code>extends</code></h3> - -<p>El primer ejemplo crea una clase con el nombre <code>Square</code> a partir de una clase llamada <code>Polygon</code>. Este ejemplo ha sido extraido del siguiente <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(código fuente)</a>.</p> - -<pre class="brush: js">class Square extends Polygon { - constructor(length) { - // Aquí se invoca el constructor de la clase padre con longitud - // proporcionada por el ancho y alto de Polygon - super(length, length); - // Nota: En las clases extendidas, se debe llamar a super() - // antes de poder usar 'this'. El no hacerlo provocará un reference error. - this.name = 'Square'; - } - - get area() { - return this.height * this.width; - } - - set area(value) { - this.area = value; - } -}</pre> - -<h3 id="Como_usar_extends_con_objetos_incorporados">Como usar <code>extends</code> con objetos incorporados</h3> - -<p>Este ejemplo extiende el objeto incorporado {{jsxref("Date")}}. Este ejemplo ha sido extraido del siguiente <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(código fuente)</a>.</p> - -<pre class="brush: js">class myDate extends Date { - constructor() { - super(); - } - - getFormattedDate() { - var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; - return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear(); - } -}</pre> - -<h3 id="Extendiendo_de_null">Extendiendo de <code>null</code></h3> - -<p>Extender de {{jsxref("null")}} es como hacerlo de una clase normal, excepto que el objeto prototype no hereda de {{jsxref("Object.prototype")}}.</p> - -<pre class="brush: js">class nullExtends extends null { - constructor() {} -} - -Object.getPrototypeOf(nullExtends); // Function.prototype -Object.getPrototypeOf(nullExtends.prototype) // null</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">Comentarios</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-class-definitions', 'extends')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatGeckoDesktop(45)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Array subclassing</td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{CompatNo}}</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>Característica</th> - <th>Android</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>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(45)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - <tr> - <td>Array subclassing</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Clases</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li> -</ul> |