Javascript:introduccion a las clases es6

Javascript:introduccion a las clases es6
by Janeth Kent Date: 27-02-2019 javascript ecmascript es6 oop classes es2015


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.

 

 
by Janeth Kent Date: 27-02-2019 javascript ecmascript es6 oop classes es2015 visitas : 4317  
 
Janeth Kent

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 END DEVELOPMENT.

 
 
 

Artículos relacionados

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración