Clases

Las clases de javascript son azúcar sintáctico sobre la existente herencia basada en prototipos de JavaScript. La sintaxis de las clases no introduce un nuevo modelo de herencia orientada a objetos a JavaScript. Las clases de JavaScript proveen una sintaxis mucho más clara y simple para crear objetos y lidiar con la herencia.

Declaración de clases

Una manera de definir una clase es mediante una declaración de clase. Para la declaración de una clase, es necesario el uso de la palabra reservada class y un nombre para la clase ("Poligono" en esté caso).

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

Hoisting (o izado)

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

var p = new Poligono(); // ReferenceError
class Poligono {}
`

Expresiones de clases

Una expresión de clase es otra manera de definir una clase. Las expresiones de clase pueden ser denominadas o anónimas. El nombre dado a la expresión de clase denominada es local al cuerpo de la misma.

// Anonima
var Poligono = class {
  constructor(alto, ancho) {
    this.alto = alto;
    this.ancho = ancho;
  }
};

// Denominada
var Poligono = class Poligono {
  constructor(alto, ancho) {
    this.alto = alto;
    this.ancho = ancho;
  }
};

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

El cuerpo de una clase es la parte que se encuentra entre las llaves { }. Este es el lugar donde 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.

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 SyntaxError

Un constructor puede usar la palabra reservada super para llamar al constructor de una clase padre.

Métodos prototipo

class Poligono {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}

const cuadrado = new Poligono(10, 10);
console.log(cuadrado.area);

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 las clases ni son llamables cuando la clase es instanciada. 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));

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

1.6 - Clases