Clases en Javascript

Cómo crear una clase en JavaScript

Javascript es un lenguaje de programación que no ha dejado de evolucionar en sus más de 30 años de historia. En la actualidad pocas cosas tiene que envidiar de otros lenguajes más avanzados especialmente tras las nuevas especificaciones EcmaScript 6 que introducen, entre otros, el manejo de clases(class) como principal novedad. Esto nos permite una mejora de sintaxis a la hora de trabajar con objetos y herencia.

Esto permite que en JavaScript podamos trabajar en un estilo de POO (Programación Orientada a Objetos) mediante prototipos, que es la manera en la que JavaScript nos acerca al manejo de objetos mediante clases de un modo similar al que ya conocemos de otros lenguajes como por ejemplo puede ser el caso de JAVA.

Las clases son por decirlo de algún modo simple "funciones especiales", como las expresiones y declaraciones de funciones. Su sintaxis tiene dos componentes: expresiones de clases y declaraciones de clases.

Pero dejemos la teoría a un lado y veamos algo más divertido. Como iba diciendo JS permite el manejo de clases, lo que conocemos como prototipos pero ahora hablaremos de cómo declarar una clase en JavaScript. Mediante algunos ejemplos, esto nos ayudará a entender mejor el concepto.

 

Declarando una clase

 

JavaScript lo pone fácil. La declaración de una clase es un proceso muy similar al de otros lenguajes de programación. Si tienes por ejemplo experiencia en JAVA el uso de la palabra reservada class ya resulta familiar pero todavía más si hablamos de otra palabra reservada como es constructor como en el siguiente ejemplo.

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

    

Como ves, declarar una clase en JavaScript no tiene ninguna ciencia. Veamos ahora otra forma de hacer lo mismo mediante expresiones de clase.

Una expresión de clase es otra manera de definir una clase. Existen dos tipos, nombradas o anónimas. Por ejemplo, para una expresión de clase nombrada, el nombre dado a la expresión de clase nombrada es local dentro del cuerpo de la misma.

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


// Anonima
let Rectangulo = class {
  constructor(alto, ancho) {
    this.alto = alto;
    this.ancho = ancho;
  }
};

console.log(Rectangulo.name);
// output: "Rectangulo"

    

 

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

 

Antes hablábamos de que una clase es un conjunto de “métodos especiales”. Es decir, el contenido de una clase, esa parte que se encuentra entre llaves {} es donde se definen esos métodos o también llamados miembros de una clase.

Modo estricto

Aunque JavaScript es un lenguaje francamente flexible también puede ser un arma de doble filo y es muy común caer en ciertos errores en el manejo de variables. Aquí es donde entra el modo estricto. Se trata de una variante que nos permite definir un método permisivo con ciertos tipos de comportamientos en el código mitigando así ciertos errores de lógica. Por ejemplo:

    
        var miVariable = 1;

function test() {
	mivariable = 5;
	alert(miVariable);
}

test();

        

Aquí el resultado de salida será 1 en lugar de 5. La razón es que hemos generado un error de intérprete al utilizar la variable “miVariable”. Por ello una forma de trabajar con JavaScript bastante común en código profesional es utilizar siempre por defecto el Modo Estricto añadiendo "use strict"; en nuestro código.

Ahora el intérprete de JavaScript se comportará en modo estricto y no permitirá esto entre muchas cosas. Al intentar el código anterior en modo estricto obtendremos un error que nos dice que la variable "mivariable" no está definida, y por lo tanto no la podemos asignar.

 

Constructor

 

El método constructor es un método especial para crear e inicializar un objeto creado con una clase. Este método es único y solo puede nombrarse una vez dentro de la clase. Si esta contiene más de una ocurrencia del método constructor, se arrojará un Error SyntaxError. Por ejemplo:

    
        class patata {
  constructor(tipo) {  // Constructor
    this.patatanombre = tipo;
  }
}
mycar = new patata("Red Pontiac");

    

 

Métodos prototipo

 

Dentro de una clase podemos definir métodos que nos permitan calcular, obtener, modificar información a partir de las variables contenidas dentro del objeto y definidas en su método constructor. Por ejemplo: .

    
        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. Estos métodos son llamados sin instanciar su clase y 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

    

 

Subclases

 

Una característica que puede ser muy útil es definir diferentes subclases que compartan métodos y características en común con una clase principal de la que heredan. Esto evita la repetición del código además de permitir un manejo menos engorroso de los diferentes objetos de nuestra aplicación.

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 + ' emite un ruido.');
  }
}

class Gato extends Animal {
  hablar() {
    console.log(this.nombre + ' maulla.');
  }
}

    

 

Y hasta aquí por el momento. Por supuesto habría mucho que hablar sobre clases como en cualquier otro lenguaje de programación orientado a objetos. Pero de lo que se trata en es este artículo es el ofrecer unas pinceladas que nos ayuden a entender sus conceptos más elementales. Posteriormente iremos ampliando detalles con más ejemplos en futuros artículos. Si tienes alguna duda por supuesto no dudes en dejar tus comentarios.

 

Tags