From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../reference/classes/constructor/index.html | 102 ++++++ .../reference/classes/extends/index.html | 167 +++++++++ .../es/web/javascript/reference/classes/index.html | 372 ++++++++++++++++++++ .../classes/private_class_fields/index.html | 201 +++++++++++ .../classes/public_class_fields/index.html | 386 +++++++++++++++++++++ .../javascript/reference/classes/static/index.html | 118 +++++++ 6 files changed, 1346 insertions(+) create mode 100644 files/es/web/javascript/reference/classes/constructor/index.html create mode 100644 files/es/web/javascript/reference/classes/extends/index.html create mode 100644 files/es/web/javascript/reference/classes/index.html create mode 100644 files/es/web/javascript/reference/classes/private_class_fields/index.html create mode 100644 files/es/web/javascript/reference/classes/public_class_fields/index.html create mode 100644 files/es/web/javascript/reference/classes/static/index.html (limited to 'files/es/web/javascript/reference/classes') diff --git a/files/es/web/javascript/reference/classes/constructor/index.html b/files/es/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..9ad7ec8de9 --- /dev/null +++ b/files/es/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,102 @@ +--- +title: constructor +slug: Web/JavaScript/Referencia/Classes/constructor +tags: + - Clases + - ECMAScript6 + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +
{{jsSidebar("Classes")}}
+ +

El método constructor es un metodo especial para crear e inicializar un objeto creado a partir de una clase.

+ +

El código fuente para este ejemplo interactivo se encuentra almacenado en un repositorio de Github. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona https://github.com/mdn/interactive-examples y envíanos una solicitud para extraer el código (pull request).

+ +

Sintaxis

+ +
constructor([argumentos]) { ... }
+ +

Descripción

+ +

Sólo puede haber un método especial con el nombre de "constructor" en una clase. Un error de sintaxis será lanzado, si la clase contiene más de una ocurrencia de un método constructor.

+ +

Un constructor puede utilizar la palabra clave super para llamar al constructor de una clase padre.

+ +

Si no especifica un método constructor, se utiliza un constructor predeterminado.

+ +

Ejemplos

+ +

Usando el método constructor

+ +

Este fragmento de código se toma de la classes sample (live demo).

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Aquí, llama al constructor de la clase padre con sus longitudes
+    // contemplando la anchura y la altura del Polígono
+    super(length, length);
+    // Nota: En las clases derivadas, super() se debe llamar primero
+    // Se puede utilizar "this". Dejando esto causará un error de
+    //referencia.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}
+ +

Constructores por defecto

+ +

Si no especifica un método constructor, se utiliza un constructor predeterminado. Para las clases base, el constructor por defecto es:

+ +
constructor() {}
+
+ +

Para las clases derivadas, el constructor por defecto es:

+ +
constructor(...args) {
+  super(...args);
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}}
+ +

Compatibilidad del navegador

+ +

{{Compat("javascript.classes.constructor")}}

+ +

La tabla de compatibilidad de esta pagina está generada a partir de data estructurada. Si quieres contribuir a la data, por favor dirígete a https://github.com/mdn/browser-compat-data y envíanos una solicitud de extracción

+ +

Ver también

+ + diff --git a/files/es/web/javascript/reference/classes/extends/index.html b/files/es/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..6781c3801e --- /dev/null +++ b/files/es/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,167 @@ +--- +title: extends +slug: Web/JavaScript/Referencia/Classes/extends +translation_of: Web/JavaScript/Reference/Classes/extends +--- +
{{jsSidebar("Classes")}}
+ +

La palabra clave extends es usada en la declaración o expresión de clases, para crear una clase hija de otra.

+ +

Sintaxis

+ +
class ChildClass extends ParentClass { ... }
+ +

Descripción

+ +

La palabra clave extends se puede usar para crear una subclase a partir de clases personalizadas, así como sus objetos incorporados.

+ +

La propiedad .prototype de la nueva subclase debe ser un {{jsxref("Object")}} o {{jsxref("null")}}.

+ +

Ejemplos

+ +

Como usar extends

+ +

El primer ejemplo crea una clase con el nombre Square a partir de una clase llamada Polygon. Este ejemplo ha sido extraido del siguiente live demo (código fuente).

+ +
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;
+  }
+}
+ +

Como usar extends con objetos incorporados

+ +

Este ejemplo extiende el objeto incorporado {{jsxref("Date")}}. Este ejemplo ha sido extraido del siguiente live demo (código fuente).

+ +
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();
+  }
+}
+ +

Extendiendo de null

+ +

Extender de {{jsxref("null")}} es como hacerlo de una clase normal, excepto que el objeto prototype no hereda de {{jsxref("Object.prototype")}}.

+ +
class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('ES6', '#sec-class-definitions', 'extends')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Array subclassing{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Array subclassing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

Ver también

+ + diff --git a/files/es/web/javascript/reference/classes/index.html b/files/es/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..0f108dda68 --- /dev/null +++ b/files/es/web/javascript/reference/classes/index.html @@ -0,0 +1,372 @@ +--- +title: Clases +slug: Web/JavaScript/Referencia/Classes +tags: + - Classes + - ECMAScript 2015 + - Herencia + - Intermedio + - JavaScript + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +
{{JsSidebar("Classes")}}
+ +

Las clases de javascript, introducidas en ECMAScript 2015, son una mejora sintáctica sobre la herencia basada en prototipos de JavaScript. La sintaxis de las clases no introduce un nuevo modelo de herencia orientada a objetos en JavaScript. Las clases de JavaScript proveen una sintaxis mucho más clara y simple para crear objetos y lidiar con la herencia.

+ +

Definiendo clases

+ +

Las clases son "funciones especiales", como las expresiones de funciones y declaraciones de funciones, la sintaxis de una clase tiene dos componentes: expresiones de clases y declaraciones de clases.

+ +

Declaración de clases

+ +

Una manera de definir una clase es mediante una declaración de clase. Para declarar una clase, se utiliza la palabra reservada class y un nombre para la clase "Rectangulo".

+ +
class Rectangulo {
+  constructor(alto, ancho) {
+    this.alto = alto;
+    this.ancho = ancho;
+  }
+}
+ +

Alojamiento

+ +

Una importante diferencia entre las declaraciones de funciones y las declaraciones de clases es que las declaraciones de funciones son alojadas y las declaraciones de clases no lo son. En primer lugar necesitas declarar tu clase y luego acceder a ella, de otro modo el ejemplo de código siguiente arrojará un {{jsxref("ReferenceError")}}:

+ +
const p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+
+ +

Expresiones de clases

+ +

Una expresión de clase es otra manera de definir una clase. Las expresiones de clase pueden ser nombradas o anónimas. El nombre dado a la expresión de clase nombrada es local dentro del cuerpo de la misma.

+ +
// Anonima
+let Rectangulo = class {
+  constructor(alto, ancho) {
+    this.alto = alto;
+    this.ancho = ancho;
+  }
+};
+
+console.log(Rectangulo.name);
+// output: "Rectangulo"
+
+// Nombrada
+let Rectangulo = class Rectangulo2 {
+  constructor(alto, ancho) {
+    this.alto = alto;
+    this.ancho = ancho;
+  }
+};
+console.log(Rectangulo.name);
+// output: "Rectangulo2"
+
+ +
+

Nota: Las expresiones de clase están sujetas a las mismas restricciones de elevación que se describen en la sección {{anch("Class declarations")}}.

+
+ +

Cuerpo de la clase y definición de métodos

+ +

El contenido de una clase es la parte que se encuentra entre las llaves {}. Este es el lugar se definen los miembros de clase, como los métodos o constructores.

+ +

Modo estricto

+ +

El cuerpo de las declaraciones de clase y las expresiones de clase son ejecutadas en modo estricto. En otras palabras, el código escrito aquí está sujeto a una sintaxis más estricta para aumentar el rendimiento, se arrojarán algunos errores silenciosos y algunas palabras clave están reservadas para versiones futuras de ECMAScript.

+ +

Constructor

+ +

El método constructor es un método especial para crear e inicializar un objeto creado con una clase. Solo puede haber un método especial con el nombre "constructor" en una clase. Si esta contiene mas de una ocurrencia del método constructor, se arrojará un Error {{jsxref("SyntaxError")}}

+ +

Un constructor puede usar la palabra reservada super para llamar al constructor de una superclase

+ +

Métodos prototipo

+ +

Vea también métodos definidos.

+ +
class Rectangulo {
+  constructor (alto, ancho) {
+    this.alto = alto;
+    this.ancho = ancho;
+  }
+  // Getter
+  get area() {
+     return this.calcArea();
+   }
+  // Método
+  calcArea () {
+    return this.alto * this.ancho;
+  }
+}
+
+const cuadrado = new Rectangulo(10, 10);
+
+console.log(cuadrado.area); // 100
+ +
+ +

Métodos estáticos

+ +

La palabra clave static define un método estático para una clase. Los métodos estáticos son llamados sin instanciar su clase y no pueden ser llamados mediante una instancia de clase. Los métodos estáticos son a menudo usados para crear funciones de utilidad para una aplicación.

+ +
class Punto {
+  constructor ( x , y ){
+    this.x = x;
+    this.y = y;
+  }
+
+  static distancia ( a , b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+
+    return Math.sqrt ( dx * dx + dy * dy );
+  }
+}
+
+const p1 = new Punto(5, 5);
+const p2 = new Punto(10, 10);
+
+console.log (Punto.distancia(p1, p2)); // 7.0710678118654755
+ +

"Boxing" con prototipos y métodos estáticos

+ +

Cuando un método estático o método del prototipo es llamado sin un valor para "this" (o con "this" como booleano, cadena, número, undefined o null), entonces el valor de "this" será undefined dentro de la funciona llamada. Autoboxing no ocurrirá. El comportamiento será igual inclusive si se escribe el código en modo no estricto.

+ +
class Animal {
+  hablar() {
+    return this;
+  }
+  static comer() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.hablar(); // Animal {}
+let hablar = obj.hablar;
+hablar(); // undefined
+
+Animal.comer() // class Animal
+let comer = Animal.comer;
+comer(); // undefined
+ +

Si se escribe el código del cuadro superior usando clases función tradicionales, entonces autoboxing ocurrirara porque tomará valor de "this" sobre la función que es llamada.

+ +
function Animal() { }
+
+Animal.prototype.hablar = function(){
+  return this;
+}
+
+Animal.comer = function() {
+  return this;
+}
+
+let obj = new Animal();
+let hablar = obj.hablar;
+hablar(); // global object
+
+let hablar = Animal.hablar;
+hablar(); // global object
+ +

Subclases con extends

+ +

La palabra clave extends es usada en declaraciones de clase o expresiones de clase para crear una clase hija.

+ +
class Animal {
+  constructor(nombre) {
+    this.nombre = nombre;
+  }
+
+  hablar() {
+    console.log(this.nombre + ' hace un ruido.');
+  }
+}
+
+class Perro extends Animal {
+  hablar() {
+    console.log(this.nombre + ' ladra.');
+  }
+}
+ +

También se pueden extender las clases tradicionales basadas en funciones:

+ +
function Animal (nombre) {
+  this.nombre = nombre;
+}
+Animal.prototype.hablar = function () {
+  console.log(this.nombre + 'hace un ruido.');
+}
+
+class Perro extends Animal {
+  hablar() {
+    super.hablar();
+    console.log(this.nombre + ' ladra.');
+  }
+}
+
+var p = new Perro('Mitzie');
+p.hablar();
+ +

Fijarse que las clases no pueden extender objectos regulares (literales). Si se quiere heredar de un objecto regular, se debe user {{jsxref("Object.setPrototypeOf()")}}::

+ +
var Animal = {
+  hablar() {
+    console.log(this.nombre + 'hace ruido.');
+  }
+};
+
+class Perro {
+  constructor(nombre) {
+    this.nombre = nombre;
+  }
+  hablar() {
+    console.log(this.nombre + ' ladra.');
+  }
+}
+
+Object.setPrototypeOf(Perro.prototype, Animal);
+
+var d = new Perro('Mitzie');
+d.hablar();
+ +

Especies

+ +

Quizás se quiera devolver objetos {{jsxref("Array")}} derivados de la clase array MyArray. El patron species permite sobreescribir constructores por defecto.

+ +

Por ejemplo, cuando se usan metodos del tipo {{jsxref("Array.map", "map()")}} que devuelven el constructor por defecto, se quiere que esos métodos devuelvan un objeto padre Array, en vez de MyArray. El símbolo {{jsxref("Symbol.species")}} permite hacer:

+ +
class MyArray extends Array {
+  // Sobre escribe species sobre el constructor padre Array
+  static get [Symbol.species]() { return Array; }
+}
+
+var a = new MyArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+
+ +

Llamadas a súperclases con super

+ +

La palabra clave super es usada para llamar funciones del objeto padre.

+ +
class Gato {
+  constructor(nombre) {
+    this.nombre = nombre;
+  }
+
+  hablar() {
+    console.log(this.nombre + ' hace ruido.');
+  }
+}
+
+class Leon extends Gato {
+  hablar() {
+    super.hablar();
+    console.log(this.nombre + ' maulla.');
+  }
+}
+ +

Mix-ins

+ +

Subclases abstractas or mix-ins son plantillas de clases. Una clase ECMAScript solo puede tener una clase padre, con lo cual la herencia multiple no es posible. La funcionalidad debe ser proporcionada por la clase padre.

+ +

Una función con una clase padre como entrada y una subclase extendiendo la clase padre como salida puede ser usado para implementar mix-ins en EMCAScript:

+ +
var calculatorMixin = Base => class extends Base {
+  calc() { }
+};
+
+var randomizerMixin = Base => class extends Base {
+  randomize() { }
+};
+ +

Una clase que use este método puede ser escrita tal que así:

+ +
class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Initial definition.
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}Available in the Nightly channel only (since February 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}Available in the Nightly channel only (since February 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
+
+ +

Ver también

+ + diff --git a/files/es/web/javascript/reference/classes/private_class_fields/index.html b/files/es/web/javascript/reference/classes/private_class_fields/index.html new file mode 100644 index 0000000000..5826cc125b --- /dev/null +++ b/files/es/web/javascript/reference/classes/private_class_fields/index.html @@ -0,0 +1,201 @@ +--- +title: Private class fields +slug: Web/JavaScript/Referencia/Classes/Private_class_fields +translation_of: Web/JavaScript/Reference/Classes/Private_class_fields +--- +
+

Las propiedades de la clase son públicas de forma predeterminada y se pueden examinar o modificar fuera de la clase. Sin embargo, existe una propuesta experimental  para permitir la definición de campos de clase privados utilizando un #prefijo hash .

+
+ +

Syntax

+ +
class ClassWithPrivateField {
+  #privateField
+}
+
+class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+ }
+}
+
+class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+}
+
+ +

Campos estáticos privados 

+ +

Los campos privados son accesibles en el constructor de clases desde dentro de la propia declaración de clases.

+ +

La limitación de las variables estáticas que se llaman solo por métodos estáticos aún se mantiene

+ +
class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)
+ +

Los campos estáticos privados se agregan al constructor de la clase en el momento de la evaluación de la clase.

+ +

Existe una restricción de procedencia en los campos estáticos privados. Solo la clase que define el campo estático privado puede acceder al campo.

+ +

Esto puede conducir a un comportamiento inesperado al usar this.

+ +
class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+let error = null
+
+try {
+  SubClass.basePublicStaticMethod()
+} catch(e) { error = e}
+
+console.assert(error instanceof TypeError)
+
+ +

Campos de instancia privados

+ +

Los campos de instancia privados se declaran con # nombres  (pronunciados " nombres hash "), que son identificadores con el prefijo #. El #es una parte del nombre propio. También se utiliza para la declaración y el acceso.

+ +

La encapsulación es impuesta por el lenguaje. Es un error de sintaxis referirse a #nombres que están fuera del alcance.

+ +
class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error
+
+ +

Métodos privados

+ +

Métodos estáticos privados

+ +

Al igual que su equivalente público, los métodos estáticos privados se invocan en la propia clase, no en instancias de la clase. Al igual que los campos estáticos privados, solo se puede acceder a ellos desde dentro de la declaración de clase.

+ +

Los métodos estáticos privados pueden ser funciones generadoras, asíncronas y asíncronas.

+ +
class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
+
+ +

Esto puede conducir a un comportamiento inesperado al usar this. En el siguiente ejemplo se thishace referencia a la Derivedclase (no a la Baseclase) cuando intentamos llamar Derived.publicStaticMethod2(), y por lo tanto exhibe la misma "restricción de procedencia" que se mencionó anteriormente:

+ +
class Base {
+    static #privateStaticMethod() {
+        return 42;
+    }
+    static publicStaticMethod1() {
+        return Base.#privateStaticMethod();
+    }
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError
+
+ +

Métodos de instancia privada

+ +

Los métodos de instancia privada son métodos disponibles en instancias de clase cuyo acceso está restringido de la misma manera que los campos de instancia privada.

+ +
class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"
+ +

Los métodos de instancia privada pueden ser funciones generadoras, asíncronas o asíncronas. Los getters y setters privados también son posibles:

+ +
class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+
+ +

Specifications

+ + + + + + + + + + + + +
Specification
{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.classes.private_class_fields")}}

+ +

See also

+ + diff --git a/files/es/web/javascript/reference/classes/public_class_fields/index.html b/files/es/web/javascript/reference/classes/public_class_fields/index.html new file mode 100644 index 0000000000..446c63c001 --- /dev/null +++ b/files/es/web/javascript/reference/classes/public_class_fields/index.html @@ -0,0 +1,386 @@ +--- +title: Class fields +slug: Web/JavaScript/Referencia/Classes/Class_fields +tags: + - Clases + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +--- +
{{JsSidebar("Classes")}}
+ +
Las declaraciones de campos públicos y privados son una característica experimental (en estado 3) propuesta por el TC39, el comite de estandares de JavaScript. El soporte y funcionamiento en navegadores es limitado, pero la funcionalidad puede ser usada a través de un paso durante el proceso del build por medio de sistemas como Babel. Revise compat information mas abajo.
+ +

Los campos públicos y estáticos son propieades editables, enumerables, y configurables. A diferencia de su contraparte privada, estos participan en la herencia de prototipo.

+ +

Sintaxis

+ +
class ClassWithInstanceField {
+  instanceField = 'instance field'
+}
+
+class ClassWithStaticField {
+  static staticField = 'static field'
+}
+
+class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world'
+  }
+}
+
+ +

Ejemplos

+ +

Campos públicos estáticos

+ +

Los campos estáticos públicos son útiles cuando desea que exista un campo solo una vez por clase, no en cada instancia de clase que cree. Esto es útil para cachés, configuración fija o cualquier otro dato que no necesite replicarse en todas las instancias.

+ +

Los campos estáticos públicos se declaran utilizando la palabra clave static. Se agregan al constructor de la clase en el momento de la evaluación de la clase utilizando {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Se accede nuevamente desde el constructor de la clase.

+ +
class ClassWithStaticField {
+  static staticField = 'static field';
+}
+
+console.log(ClassWithStaticField.staticField);
+// expected output: "static field"​
+
+ +

Campos sin inicializadores son inicializados como undefined.

+ +
class ClassWithStaticField {
+  static staticField;
+}
+
+console.assert(ClassWithStaticField.hasOwnProperty('staticField'));
+console.log(ClassWithStaticField.staticField);
+// expected output: "undefined"
+ +

Los campos estáticos públicos no se reinicializan en las subclases, pero se puede acceder a ellos a través de la cadena de prototipo.

+ +
class ClassWithStaticField {
+  static baseStaticField = 'base field';
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = 'sub class field';
+}
+
+console.log(SubClassWithStaticField.subStaticField);
+// expected output: "sub class field"
+
+console.log(SubClassWithStaticField.baseStaticField);
+// expected output: "base field"
+ +

Cuando se inicializasn campos this se refiere al constuctor de clase. Tambien puede ser referenciado por nombre, y se puede usar super para obtener el constructor de la superclase si lo tiene.

+ +
class ClassWithStaticField {
+  static baseStaticField = 'base static field';
+  static anotherBaseStaticField = this.baseStaticField;
+
+  static baseStaticMethod() { return 'base static method output'; }
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = super.baseStaticMethod();
+}
+
+console.log(ClassWithStaticField.anotherBaseStaticField);
+// expected output: "base static field"
+
+console.log(SubClassWithStaticField.subStaticField);
+// expected output: "base static method output"
+
+ +

Campos de instancia públicos

+ +

Los campos de instancia públicos existen en cada instancia de la clase que se ha creado. Al declarar un campo publico podemos asegurarnos que dicho campo siempre esta presente, y la definicion de la clase esta auto-documentada.

+ +

Los campos de instancia públicos son agregados with Object.defineProperty ya sea a la hora de ser construido en la clase base (antes que el metodo constructor corra), o justo despues que  super() returne en una subclase.

+ +
class ClassWithInstanceField {
+  instanceField = 'instance field';
+}
+
+const instance = new ClassWithInstanceField();
+console.log(instance.instanceField);
+// expected output: "instance field"
+ +

Campos sin inicializadores son inicilizados en undefined.

+ +
class ClassWithInstanceField {
+  instanceField;
+}
+
+const instance = new ClassWithInstanceField();
+console.assert(instance.hasOwnProperty('instanceField'));
+console.log(instance.instanceField);
+// expected output: "undefined"
+ +

Al igual que las propiedades, los nombres de campos pueden ser calculados (computed)

+ +
const PREFIX = 'prefix';
+
+class ClassWithComputedFieldName {
+    [`${PREFIX}Field`] = 'prefixed field';
+}
+
+const instance = new ClassWithComputedFieldName();
+console.log(instance.prefixField);
+// expected output: "prefixed field"
+ +

Cuando se inicializan campos this se refiere a la instancia de clase que esta siendo construida. Al igual que con los metodos publicos de instancia, si usted esta en una subclase puede acceder a al prototypo de la superclase usando super.

+ +
class ClassWithInstanceField {
+  baseInstanceField = 'base field';
+  anotherBaseInstanceField = this.baseInstanceField;
+  baseInstanceMethod() { return 'base method output'; }
+}
+
+class SubClassWithInstanceField extends ClassWithInstanceField {
+  subInstanceField = super.baseInstanceMethod();
+}
+
+const base = new ClassWithInstanceField();
+const sub = new SubClassWithInstanceField();
+
+console.log(base.anotherBaseInstanceField);
+// expected output: "base field"
+
+console.log(sub.subInstanceField);
+// expected output: "base method output"
+ +

Métodos públicos

+ +

Métodos públicos estáticos

+ +

La palabra reservada static define un metodo estático para una clase. Los métodos estáticos no son llamads usando una instancia de la clase. En lugar de eso son llamados sobre la clase como tal. Estos metodos estáticos son frecuentemente funciones utilitarias que permiten por ejemplo la creación y clonacion de objetos.

+ +
class ClassWithStaticMethod {
+  static staticMethod() {
+    return 'static method has been called.';
+  }
+}
+
+console.log(ClassWithStaticMethod.staticMethod());
+// expected output: "static method has been called."
+ +

Los métodos estáticos son agregados al constructor de la clase usando Object.defineProperty duranten el evaluación de la clase. Estos metodos son "escribibles" (writable), no-enumerables y configurables.

+ +

Métodos públicos de instancia

+ +

Como su nombre lo indica, los métodos publicos de instancia son metodos que estan disponibles para cualquier instancia de una clase.

+ +
class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world';
+  }
+}
+
+const instance = new ClassWithPublicInstanceMethod();
+console.log(instance.publicMethod());
+// expected output: "hello worl​d"
+ +

Los métodos públicos de instancia son agregeados al prototipo de clase durante la evaluacón de la clase usando Object.defineProperty. Estos metodos son "escribibles" (writable), no-enumerables y configurables.

+ +

Usted puede usar un generador, async y funciones generadoras asincronas

+ +
class ClassWithFancyMethods {
+  *generatorMethod() { }
+  async asyncMethod() { }
+  async *asyncGeneratorMethod() { }
+}
+ +

Dentro de un metodo de instancia, this se referie a la instancia como tal. En las subclases, super le permite acceder el prototipo de la superclase, permitiendo así llamar métodos de la superclase.

+ +
class BaseClass {
+  msg = 'hello world';
+  basePublicMethod() {
+    return this.msg;
+  }
+}
+
+class SubClass extends BaseClass {
+  subPublicMethod() {
+    return super.basePublicMethod();
+  }
+}
+
+const instance = new SubClass();
+console.log(instance.subPublicMethod());
+// expected output: "hello worl​d"
+
+ +

Existen metodos especiales llamados "Getters" y "Setters" que se vinculan a una propiedad de una clase, y que son ejecutados o llamados cuando esa propiedad es consultada o moditficada. Puede usar las palabras reservaddas get y set para declarar una instancia pública de "getter" or "setter". [N.T. preferí decir Getter/Setter que decir Consultadores/Mofificadores]

+ +
class ClassWithGetSet {
+  #msg = 'hello world';
+  get msg() {
+    return this.#msg;
+  }
+  set msg(x) {
+    this.#msg = `hello ${x}`;
+  }
+}
+
+const instance = new ClassWithGetSet();
+console.log(instance.msg);
+// expected output: "hello worl​d"
+
+instance.msg = 'cake';
+console.log(instance.msg);
+// expected output: "hello cake"
+
+ +

Campos privados

+ +

Campos privados estáticos

+ +

Private fields are accessible on the class constructor from inside the class declaration itself.

+ +

The limitation of static variables being called by only static methods still holds.

+ +
class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD;
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42;
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD;
+  }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);
+ +

Private static fields are added to the class constructor at class evaluation time.

+ +

There is a provenance restriction on private static fields. Only the class which defines the private static field can access the field. This can lead to unexpected behaviour when using this

+ +
class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD;
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42;
+    return this.#PRIVATE_STATIC_FIELD;
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+assertThrows(() => SubClass.basePublicStaticMethod(), TypeError);
+
+ +

Campos privados de instancia

+ +

Private instance fields are declared with # names ( pronounced "hash names"), which are identifiers prefixed with #. The # is a part of the name itself and is used for declaration and accessing as well.

+ +

The encapsulation is enforced by the language. It is a syntax error to refer to # names not in scope.

+ +
class ClassWithPrivateField {
+  #privateField;
+
+  constructor() {
+    this.#privateField = 42;
+    this.#randomField = 666; # Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField();
+instance.#privateField === 42; // Syntax error
+
+ +

Métodos privados

+ +

Métodos privados estáticos

+ +

Like their public equivalent, private static methods are called on the class, not instances of the class. Like private static fields, they are only accessible from inside the class declaration.

+ +

Private static methods may be generator, async and async generator functions.

+ +
class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42;
+    }
+
+    static publicStaticMethod() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);
+
+ +

Métodos privados de instancia

+ +

Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.

+ +
class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world';
+  }
+
+  getPrivateMessage() {
+      return #privateMethod();
+  }
+}
+
+const instance = new ClassWithPrivateMethod();
+console.log(instance.getPrivateMessage());
+// expected output: "hello worl​d"
+ +

Private instance methods may be generator, async or async generator functions. Private getters and setters are also possible:

+ +
class ClassWithPrivateAccessor {
+  #message;
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`;
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg;
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world';
+    console.log(this.#decoratedMessage);
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
FieldDefinition productionStage 3
+ +

Compatibilidad de navegadores

+ +

Campos públicos de clse

+ + + +

{{Compat("javascript.classes.public_class_fields")}}

+ +

Campos privados de clase

+ + + +

{{Compat("javascript.classes.private_class_fields")}}

+ +

Ver también

+ + diff --git a/files/es/web/javascript/reference/classes/static/index.html b/files/es/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..92f972f171 --- /dev/null +++ b/files/es/web/javascript/reference/classes/static/index.html @@ -0,0 +1,118 @@ +--- +title: static +slug: Web/JavaScript/Referencia/Classes/static +translation_of: Web/JavaScript/Reference/Classes/static +--- +
{{jsSidebar("Classes")}}
+ +

La palabra clave static define un método estático para una clase.

+ +

Sintaxis

+ +
static methodName() { ... }
+ +

Descripción

+ +

Los métodos estáticos son llamados sin instanciar su clase. Son habitualmente utilizados para crear funciones para una aplicación.

+ +

Ejemplos

+ +

El siguiente ejemplo demuestra varias cosas. Una de ellas es cómo un método estático es implementado en una clase, otra es que una clase con un miembro estático puede ser sub-claseada. Finalmente demuestra cómo un método estático puede (y cómo no) ser llamado.

+ +
class Tripple {
+  static tripple(n) {
+    n = n || 1;
+    return n * 3;
+  }
+}
+
+class BiggerTripple extends Tripple {
+  static tripple(n) {
+    return super.tripple(n) * super.tripple(n);
+  }
+}
+
+console.log(Tripple.tripple());
+console.log(Tripple.tripple(6));
+console.log(BiggerTripple.tripple(3));
+var tp = new Tripple();
+console.log(tp.tripple()); //Logs 'tp.tripple is not a function'.
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Initial definition.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}Available in the Nightly channel only (since February 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome(42.0)}}Available in the Nightly channel only (since February 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Véase también

+ + -- cgit v1.2.3-54-g00ecf