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
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.
Artículos relacionados
Crear PDF con Javascript y jsPDF
El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…
Como hacer tu propio cursor personalizado para tu web
Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…
Explorando la API de CSS Paint: Redondeo de formas parte 1
Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…
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…