Clases

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.

Declaracin de clases

Una manera de definir una clase es mediante una declaracin 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 cdigo siguiente arrojar un ReferenceError:

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Expresiones de clases

Una expresin de clase es otra manera de definir una clase. Las expresiones de clase pueden ser nombradas o annimas. El nombre dado a la expresin 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"

Cuerpo de la clase y definicin de mtodos

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 mtodos 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 cdigo escrito aqu est sujeto a una sintaxis ms estricta para aumentar el rendimiento, se arrojarn algunos errores silenciosos y algunas palabras clave estn reservadas para versiones futuras de ECMAScript.

Constructor

El mtodo constructor es un mtodo especial para crear e inicializar un objeto creado con una clase. Solo puede haber un mtodo especial con el nombre "constructor" en una clase. Si esta contiene mas de una ocurrencia del mtodo constructor, se arrojar un Error SyntaxError

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

Mtodos prototipo

Vea tambin mtodos definidos.

class Rectangulo {
  constructor(alto, ancho) {
    this.alto = alto;
    this.ancho = ancho;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Mtodo
  calcArea() {
    return this.alto * this.ancho;
  }
}

const cuadrado = new Rectangulo(10, 10);

console.log(cuadrado.area); // 100

Mtodos estticos

La palabra clave static define un mtodo esttico para una clase. Los mtodos estticos son llamados sin instanciar su clase y no pueden ser llamados mediante una instancia de clase. Los mtodos estticos son a menudo usados para crear funciones de utilidad para una aplicacin.

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 mtodos estticos

Cuando un mtodo esttico o mtodo del prototipo es llamado sin un valor para "this" (o con "this" como booleano, cadena, nmero, 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 cdigo 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 cdigo del cuadro superior usando clases funcin tradicionales, entonces autoboxing ocurrirara porque tomar valor de "this" sobre la funcin 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.");
  }
}

Tambin 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 Object.setPrototypeOf()::

var Animal = {
  hablar() {
    console.log(this.nombre + ' hace ruido.');
  },
  comer() {
    console.log(this.nombre + ' se alimenta.');
  }
};

class Perro {
  constructor(nombre) {
    this.nombre = nombre;
  }
  hablar() {
    console.log(this.nombre + ' ladra.');
  }
}

// Solo adjunta los mtodos an no definidos
Object.setPrototypeOf(Perro.prototype, Animal);

var d = new Perro('Mitzie');
d.hablar(); // Mitzie ladra.
d.comer(); // Mitzie se alimenta.

Especies

Quizs se quiera devolver objetos Array derivados de la clase array MyArray. El patron species permite sobreescribir constructores por defecto.

Por ejemplo, cuando se usan metodos del tipo map() que devuelven el constructor por defecto, se quiere que esos mtodos devuelvan un objeto padre Array, en vez de MyArray. El smbolo Symbol.species permite hacer:

class MyArray extends Array {
  // Sobreescribe 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 sperclases 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 funcin 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 mtodo puede ser escrita tal que as:

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

Especificaciones

Compatibilidad con navegadores

Ver tambin

• Funciones
• class declaration
• class expression
• super