En Javascript no existía una manera específica de crear clases, de programación orientada a objetos (POO). Sí que existían diversas alternativas que se podrían usar para crear componentes parecidos a lo que serían las clases en la POO tradicional, pero lo cierto es que no existía una declaración "class" como se podría esperar.

Así que en la versión reciente de Javascript ES6 una de las novedades más importantes fue la incorporación de la declaración de clases. Aunque las clases en Javascript siguen sin ser exactamente lo que puedas conocer en lenguajes más tradicionales como Java, sí resulta un avance determinante. Es importante que lo conozcas, ya que ha sido muy bien acogido por la comunidad y las mejores librerías y frameworks se han decidido a incorporar las declaraciones de clases como mecanismo de creación de sus diferentes componentes o artefactos.

En este artículo no pretendemos explicar el concepto de clase, algo que ya hemos tratado en diversas ocasiones anteriores, como en el Manual de Programación Orientada a Objetos, sino que nos queremos centrar más en la sintaxis y alternativas para definir clases en Javascript con ES6.

Declaración de una clase en Javascript ECMAScript 2015

En ECMAScript 2015 (ES6) las clases se declaran de manera similar a otros lenguajes, usando la palabra "class", seguida del nombre de la clase que estamos creando.

class Coordenada {

}

Dentro de las llaves del "class" colocaremos el código de la clase. En lenguajes tradicionales serían típicamente los atributos y los métodos, pero en Javascript los atributos de instancia los tendremos que crear dentro del constructor.

class Coordenada {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

Esta clase define un constructor, que se encarga de resumir las tareas de inicialización de los objetos. En la inicialización creamos los atributos que debe contener todo objeto que se cree a partir de esta clase.

Instanciación de objetos a partir de una clase

Como en otros lenguajes, usamos la palabra "new" para crear nuevos objetos de una clase, seguida del nombre de la clase y todos los parámetros que se deban indicar para invocar al constructor.

var testCoordenada = new Coordenada(8,55);

El proceso de instanciación creará el nuevo objeto y su inicialización quedará en manos del constructor. En nuestro caso el construtor había creado dos propiedades para cada instancia, a los que les asignaba los valores de los puntos de la coordenada.

Los objetos poseen propiedades, también llamados atributos, que se hayan definido en el momento de creación de la clase o en cualquier otro momento de la vida de ese objeto. En nuestro caso se crearon los atributos "x" e "y".

Una vez creados los objetos podríamos acceder a sus atributos a partir del operador punto ("."). Usamos el nombre del objeto que acabamos de crear, el operador punto y el nombre del atributo al que queramos acceder.

console.log(testCoordenada.x);

Eso nos imprimiría en la consola el valor del atributo "x" del objeto que se había creado anteriormente.

Creación de métodos en la clase

Las clases en ES6 pueden declarar sus métodos de una manera resumida, pues nos ahorramos la palabra "function" en la declaración de la función.

En el código del ejemplo de la coordenada ya teníamos un método, aunque algo especial, ya que era el método constructor. El constructor debe tener siempre el nombre "constructor", pero podríamos crear otros métodos con cualquier otro nombre.

class Coordenada {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  esIgual(coordenada) {
    if (this.x == coordenada.x && this.y == coordenada.y) {
      return true;
    }
    return false;
  }
}

En el código anterior hemos agregado el método "esIgual" que se encarga de decir si una coordenada recibida por parámetro tiene los mismos valores de x e y que la coordenada que ha recibido el mensaje.

Recuerda que los métodos se invocan sobre el nombre del objeto, con el operador punto y el nombre del método, seguido por sus parámetros. Podríamos usar esta clase y el nuevo método con este código:

var testCoordenada = new Coordenada(8,55);
console.log(testCoordenada.esIgual(new Coordenada(3, 1)))

Al ejecutar esto, veríamos "false" en la consola de Javascript.

Declaraciones de clases siempre antes de su uso

Es indispensable que se declaren las clases antes de usarlas. A diferencia de las funciones en Javascript, que se pueden usar antes de haber sido declaradas, las clases deben conocerse antes de poder instanciar objetos.

Es decir, un código como este no funcionaría:

var x = new MiClase();
class MiClase {}:

Si intentas ejecutarlo, recibirías por consola un mensaje como este: "Uncaught ReferenceError: MiClase is not defined".

Expresiones de clases ES6

Otra manera de declarar clases en ES6 es mediante lo que se conoce como expresiones. Básicamente consiste en crear una variable y asignarle una expresión definida mediante class y las llaves.

var Persona = class {
  constructor(nombre) {
    this.nombre = nombre;
  }
}

La clase puede ser anónima, como en el ejemplo anterior, aunque también podría tener un nombre.

El uso de una clase definida con una expresión, a la hora de instanciar objetos, es exactamente el mismo que hemos visto anteriormente.

var miguel = new Persona('Miguel Angel Alvarez');
console.log(miguel.nombre);

Ahora ya sabes declarar clases en ES6, así como definir métodos. Has aprendido a usarlas para instanciar objetos y luego a usar esos objetos para el acceso a sus miembros, tanto sus atributos como sus métodos.

En siguientes artículos exploraremos más características de ECMAScript 2015 relacionadas con las clases, como la herencia en las clases de ES6.