Javascript:introduccion a las clases es6

Una nueva y fascinante característica que se introdujo en la especificación ES6 son las clases ES6. Si eres un desarrollador de Javascript, sabrás que Javascript sigue la herencia prototípica y a veces puede resultar un poco complicado, con las clases ES6 la sintaxis es más simple y mucho más intuitiva.

Sin embargo, contrariamente a lo que el nombre puede sugerir a un desarrollador, las clases en ES6 no traducen el paradigma basado en clases orientado a objetos típico de otros lenguajes de programación como Java o Php.
Por ejemplo, puede notar que la palabra clave Class en Javascript ES6 todavía no soporta Miembros Privados; siempre es posible acceder desde fuera de los métodos definidos dentro de una clase dada y modificarlos a voluntad (o más bien por error).

JavaScript es por lo tanto un lenguaje basado en "objectos" en el concepto de prototipo, a diferencia de la mayoría de los lenguajes de programación basados en el concepto de clase. Esta sutil diferencia ha causado a menudo dificultades a los desarrolladores acostumbrados a utilizar lenguajes como Java o C#, donde un objeto es siempre una instancia de una clase. Algunas librerías implementan funcionalidades que permiten acercar la aproximación del prototipo de objetos JavaScript a la basada en clases de otros lenguajes de programación, por supuesto con las diferencias necesarias.

Diferencias sustanciales entre clases y prototipos

En los lenguajes de programación orientados a objetos basados en clases, un objeto no puede existir a menos que se haya definido primero una clase. Una clase es una abstracción que define las características que tendrán los objetos creados por ella. En JavaScript, sin embargo, cada objeto se crea directamente, sin necesidad de definir primero una clase.

En los lenguajes de objeto tradicionales se puede crear una subclase a partir de una clase y, a continuación, objetos que heredan las características de la clase base. En JavaScript es posible obtener un efecto análogo a través del concepto de prototipo, con el que un objeto lleva a modelar otro objeto compartiendo sus características y eventualmente añadiendo otras nuevas.

A diferencia de los lenguajes tradicionales orientados a objetos basados en clases, donde una clase define todas las características que un objeto puede tener, en JavaScript puedes definir algunas características para un objeto y enriquecerlo con nuevas propiedades y métodos en tiempo de ejecución.
Vamos a empezar con nuestro primer código de clase javascript

Creación de clases en JavaScript (Ecma 6)

Una clase en este modelo sintáctico es una forma alternativa de definir un fabricante. Podemos por ejemplo usar la palabra clave class para crear una clase y definir el constructor del objeto Vehicle de la siguiente manera:

class Vehicle {
    constructor(brand, model) {
        this.brand = brand;
        this.model = model;
        this.kind= "";
        this._engine = "";        
    }
}

La sintaxis es familiar para un desarrollador OOP pero aún así se debe tener en cuenta que el constructor está indicado por el método constructor() que contiene los argumentos sobre el vehículo, podemos establecer sus propiedades usando el this

Nótese que, como dijimos antes, ES6 no introdujo clases reales sino más bien una ficción sintáctica, como podemos demostrar fácilmente simplemente consultando la Consola del Navegador sobre el código que acabamos de escribir:

> typeof Vehicle 
"function"

Podemos crear un nuevo objeto a partir de la clase que acaba de definir el nuevo operador, de forma totalmente idéntica a lo que hicimos con el constructor funcionalmente definido:

let vehicle = new Vehicle("Ferrari", "Testarossa");

Propiedades y métodos, getters y setters

Puede crear propiedades, métodos, getters y setters de forma intuitiva, como se muestra en el siguiente código:

class Vehicle {
    constructor(brand, model) {
        this.brand = brand
        this.model = model
        this.kind= "";
        this._engine = "";    
    }
    showVehicleBrandModel() {
        return this.brand + " " + this.model;
    }
    get engine() { return this._engine; }
    set engine(value) {
        this._engine = value;        
    }
}

Aquí definimos un showVehicleBrandModel() y los dos get engine() y set engine(value), luego mostramos en console.log la llamada del método showVehicleBrandModel(). Tenga en cuenta que utilizamos _engine como propiedad porque el engine se utilizará con las funciones get y set.

let vehicle = new Vehicle("Ford", "Mustang");
// Get the description
console.log(vehicle.showVehicleBrandModel());
> 'Ford Mustang'

vehicle.engine = 'V6'
console.log(vehicle.engine);
>'V6'

Podemos llamar al método vehicle.showVehicleBrandModel() después de haber creado una nueva instancia de Vehicle. También podemos ver la propiedad vehicle.kind como siempre.

También es posible añadir propiedades y métodos sobre la marcha. Por ejemplo, podemos añadir la propiedad weight dinámicamente

vehicle.weight = 1400;
console.log(vehicle.weight);
> 1400;

Claramente, si creamos una nueva instancia de Vehicle, perdemos todas las propiedades dinámicas insertadas anteriormente.

Métodos estáticos

Al igual que otros idiomas con miembros de clase estáticos, la palabra clave estática creará un método asociado con la clase, y no con una instancia de la clase. En otras palabras, sólo se puede llegar a un método estático utilizando el nombre de la clase.

class Vehicle {
    constructor(brand, model) {
        this.brand = brand
        this.model = model
        this.kind= "";
        this._engine = "";    
    }
    showVehicleBrandModel() {
        return this.brand + " " + this.model;
    }
    static ignite(){
        console.log("wrooom")
     }
    // more code ...
}
console.log(Vehicle.ignite());
> 'wrooom.'

Dado que estos métodos operan en la clase en lugar de en las instancias de la clase, son llamados en la clase, no es necesario definir un new Vehicle para llamar al método estático.

Herencia (Inheritance)

En la programación orientada a objetos, la herencia es el mecanismo de basar una clase en otra clase, manteniendo una implementación similar. También se define como la derivación de nuevas clases (subclases) a partir de las ya existentes (superclase o clase base) y su formación en una jerarquía de clases.:

class Vehicle {
    constructor(brand, model) {
        this.brand = brand
        this.model = model
        this.kind= "";
        this._engine = "";    
    }
    showVehicleBrandModel() {
        return this.brand + " " + this.model;
    }
    static ignite(){
        console.log("wrooom")
     }
}
class DetailedVehicle extends Vehicle {
    showVehicleBrandModel() {
        return "Brand:" + this.brand + " - Model:" + this.model;
    }
}

let vehicle = new Vehicle("Ford", "Mustang");
let vehicleDetail = new DetailedVehicle("Ford", "Mustang");
console.log(vehicle.showVehicleBrandModel());
> 'Ford Mustang'
console.log(vehicleDetail.showVehicleBrandModel());
> 'Brand:Ford - Model:Mustang'
    

En este caso creamos una nueva clase vehicleDetail que tiene la misma propiedad de Vehicle.

Gracias a la palabra clave extends puede especializar una clase en una clase infantil, manteniendo la referencia a la clase raíz. Con todas estas grandes adiciones, ahora es posible crear clases y trabajar con herencia sin tener que tratar con prototipos, en nuestro caso sobreescribimos el método showVehicleBrandModel().

La palabra clave Super

Si necesitamos obtener valores de un método de clase padre o de una propiedad, podemos usar la superpalabra clave:

class Vehicle {
    constructor(brand, model) {
        this.brand = brand
        this.model = model
        this.kind= "";
        this.engine = "";    
    }
    otherProperties(){
        this.kind= "car";
        this.engine = "v6";  
        return "this " + this.kind + " with engine " + this.engine + " it's very fast";
    }
    showVehicleBrandModel() {
        return this.brand + " " + this.model;
    }
}

class DetailedVehicle extends Vehicle {
    showVehicleBrandModel() {         
        return this.brand + " " + this.model + " " + super.otherProperties();
    }
}

let vehicleDetail = new DetailedVehicle("Ford", "Mustang");
console.log(vehicleDetail.showVehicleBrandModel());
 
> Ford Mustang this car with engine v6 it's very fast
    

Aquí estamos llamando al método otherProperties() contenido en Vehicle class e inyectándolo a la nueva clase showVehicleBrandModel() de vehicleDetail. Tenga en cuenta que si llamamos al método estático obtenemos un error.

Consideraciones finales

Si ha utilizado clases OOP en otros idiomas, estará familiarizado con este concepto de clases en Javascript ES6, las funcionalidades como los métodos estáticos y la herencia son realmente similares a otros lenguajes de programación..

Esto cubre todas las funciones principales de las clases, de todos modos te sugiero que amplíes el tema buscando en nuestro sitio con las palabras clave javascript y ES6.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.