aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/javascript/reference/operators/class
diff options
context:
space:
mode:
authorFlorian Dieminger <me@fiji-flo.de>2021-02-11 18:20:58 +0100
committerGitHub <noreply@github.com>2021-02-11 18:20:58 +0100
commit2318b37e3fd17a3e76a29b9be7d1ce82f040c3bb (patch)
tree5e640d40fd69dc380b04e01de981a345e0141ffa /files/es/web/javascript/reference/operators/class
parent6aa6274d2ad3e22e7f5e69b1d7531a5eaeaf5666 (diff)
parent8a5554c6fae83e92b10c8dbe5b82108cb44fad6c (diff)
downloadtranslated-content-2318b37e3fd17a3e76a29b9be7d1ce82f040c3bb.tar.gz
translated-content-2318b37e3fd17a3e76a29b9be7d1ce82f040c3bb.tar.bz2
translated-content-2318b37e3fd17a3e76a29b9be7d1ce82f040c3bb.zip
Merge pull request #53 from fiji-flo/unslugging-es
Unslugging es
Diffstat (limited to 'files/es/web/javascript/reference/operators/class')
-rw-r--r--files/es/web/javascript/reference/operators/class/index.html158
1 files changed, 158 insertions, 0 deletions
diff --git a/files/es/web/javascript/reference/operators/class/index.html b/files/es/web/javascript/reference/operators/class/index.html
new file mode 100644
index 0000000000..9800963fd7
--- /dev/null
+++ b/files/es/web/javascript/reference/operators/class/index.html
@@ -0,0 +1,158 @@
+---
+title: expresión class
+slug: Web/JavaScript/Reference/Operators/class
+tags:
+ - Classes
+ - ECMAScript6
+ - Expression
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/class
+original_slug: Web/JavaScript/Referencia/Operadores/class
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La <strong>expresión class</strong> es una forma de definir una clase en ECMAScript 2015 (ES6). Similar a las <a href="/es/docs/Web/JavaScript/Referencia/Operadores/function">funciones</a>, las expresiones de clase pueden ser nombradas o no. Si se nombran, el nombre de la clase es local sólo en el cuerpo de la clase. Las clases en JavaScript utilizan herencia basada en prototipos.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] {
+  // class body
+};</pre>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Una expresión de clase tiene una sintaxis similar a la <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaración de una clase</a>. Sin embargo, con las expresiones de clases, está permitido omitir el nombre de la clase ("identificador de enlace"), cosa que no se puede hacer con las declaraciones de clases. Además, las expresiones de clases permiten redefinir/redeclarar clases y <strong>no lanzar</strong> ningún tipo de error como las <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaraciones de clases</a>. La propiedad <code>constructor</code> es opcional. Y el <em>typeof </em>de las clases generadas con esta palabra clave siempre será "function".</p>
+
+<p>Tal y como en la declaración de clases, el cuerpo de la expresión de clase se ejecuta en <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">modo estricto</a>.</p>
+
+<pre class="brush: js">'use strict';
+var Foo = class {}; // la propiedad constructor es opcional
+var Foo = class {}; // Se permite repetir declaraciones
+
+typeof Foo; // devuelve "function"
+typeof class {}; // devuelve "function"
+
+Foo instanceof Object; // true
+Foo instanceof Function; // true
+class Foo {}; // Lanza TypeError, no permite volver a declararla
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Una_clase_sencilla">Una clase sencilla</h3>
+
+<p>Esta es una sencilla expresión de clase anónima a la que se puede hacer referencia utilizando la variable "Foo".</p>
+
+<pre class="brush: js">var Foo = class {
+ constructor() {}
+ bar() {
+ return "Hello World!";
+ }
+};
+
+var instance = new Foo();
+instance.bar(); // "Hello World!"
+Foo.name; // "Foo"
+</pre>
+
+<h3 id="Expresiones_de_clase_con_nombre">Expresiones de clase con nombre</h3>
+
+<p>Si se quiere hacer referencia a la clase actual dentro del cuerpo de la clase, se puede crear una expresión de clase con nombre. Este nombre sólo será visible en el mismo contexto de la expresión de clase.</p>
+
+<pre class="brush: js">var Foo = class NamedFoo {
+ constructor() {}
+ whoIsThere() {
+ return NamedFoo.name;
+ }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo no está definido
+Foo.name; // "NamedFoo"
+</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('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>Definición inicial.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</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>Soporte básico</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ <td>{{CompatGeckoDesktop(45)}}</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>Android Webview</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ <th>Chrome para Android</th>
+ </tr>
+ <tr>
+ <td>Soporte básico</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ <td>{{CompatGeckoMobile(45)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores/function">expresión <code>function</code></a></li>
+ <li><code><a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaración class</a></code></li>
+ <li><a href="/es/docs/Web/JavaScript/Referencia/Classes">Clases</a></li>
+</ul>