Usando Clases en JavaScript
Actualmente con las nuevas especificaciones EcmaScript 6 se introduce el manejo de clases(class), estas brindan una mejora de sintaxis en la creación de objetos y herencia basada en prototipos(Manera en la que JavaScript entiende POO), por lo que el uso de clases en JavaScript(JS) no introducen nuevos conceptos solo generan una sintaxis más clara en el manejo de prototipos.
Tomando lo anterior en cuenta podríamos decir que el manejo de prototipos dentro de JS es un estilo de POO(Programación Orientada a Objetos), el objetivo de este post no es profundizar en el manejo de POO dentro de JS por lo que si deseas entender más sobre el tema te recomiendo revises el siguiente articulo.
Dicho lo anterior es importante mencionar que si se mostraran algunas pequeñas diferencias en el manejo de clases y prototipos, esto con la finalidad de tener un punto de referencia.
Manos a la obra
Después de un poco de teoría empecemos con lo divertido, hablemos de código, como se mencionó con anterioridad JS ya permite el manejo de clases lo que conocemos como prototipos.
Declarando una clase
Al igual que otros lenguajes que usan POO en JS ya podemos utilizar la palabra reservada class y esta tambien cuenta con un constructor, tal ves a primera vista no podemos apreciar la mejora mencionada para tener un enfoque más claro analicemos el siguiente ejemplo.
Como se muestra en ejemplo anterior se genera una clase utilizando las nuevas especificaciones de EcmaScript 6, de entrada podemos apreciar.
- Que nuestra clase se inicia utilizando class.
- Se declara un método constructor.
- Se declara el método setValores el cual ya está dentro de nuestra clase, dicho método modifica las variables inicializadas en el constructor.
- Se genera la instancia de nuestra clase usando new(Esto tambien es posible usando prototipos).
- Podemos ver que la nueva sintaxis es muy similar a la que presentan otros lenguajes de programación que utilizan POO, por lo que puede ser entendida con mayor facilidad por otros desarrolladores.
Nota: Actualmente muchos FrameWork y Librerías de JS están utilizando las nuevas características que ofrece EcmaScript6, una de las más populares por el momento es ReactJS.
Todo suena muy bien pero cual es punto de comparación para poder apreciar las mejoras que ofrece el manejo de clases dentro de JS, analicemos el siguiente ejemplo.
Como se muestra en el ejemplo anterior podemos ver que se genera una codificación similar a la del ejemplo anterior solo que en este destacan.
- Se declara una función común y corriente la cual tomará el papel de prototipo y tambien será el constructor.
- Se declara un método setValores el cual para pertenecer a nuestro prototipo tiene que llevar como prefijo “[nombre_protitipo].prototype.[nombre_del_metodo]”, este prefijo siempre tendrá que colocarse cuando se requiera generar un nuevo método.
- Al igual que el ejemplo de clases se utiliza new para generar una instancia del prototipo.
- El código puede ser comprendido por los desarrolladores que están muy acostumbrados a la magia de JS, pero talves no por terceros ya que de primera vista no parece POO.
Hasta este punto podemos ver claramente muchas mejoras que nos brinda el manejo de clases en JS pero por eso no subestimemos el manejo de prototipos ya que son muy potentes si quieres ver un poco más de prototype puedes ver.
Utilizando herencia
Una de las grandes ventajas que ofrece POO es la herencia, prácticamente es tomar métodos de otra clase e implementarlos en una clase nueva, con las nuevas especificaciones de EcmaScript 6, facilita el manejo de la herencia prácticamente podemos utilizar el todo poderoso extends, modifiquemos nuestro ejemplo pasado para agregarle un nuevo método heredado.
Como podemos ver en el ejemplo anterior estamos realizando una herencia, constamos con una nueva clase “SumaUsandoClass” la cual contiene un método “getSuma” que genera la suma de 2 valores, los cuales provienen de la clase “CalculadoraUsandoClass”, tambien del código anterior podemos destacar.
- Estamos utilizando extends para poder generar la herencia.
- La clase hija “CalculadoraUsandoClass” contiene una nueva sentencia llamada super la cual permite invocar el constructor de la clase padre “SumaUsandoClass” cabe mencionar que la sentencia super siempre se tiene que declarar antes de utilizar un this, super tambien permite invocar métodos de la clase padre.
super.[Nombre_del_metodo_de_la_clase_padre]();3. Al generar la instancia de la clase hija podemos acceder a los métodos de la clase padre, por lo que podremos ejecutar “getSuma” sin que exista en la clase hija, de igual manera la clase padre puede acceder a elementos de la clase hija y viceversa.
4.- Seguimos conservando un código similar al de otros lenguajes de programación que implementan POO.
Nuevamente para poder ver las mejoras obtenidas utilicemos el siguiente punto de comparación.
Como se puede apreciar el manejo de la herencia utilizando prototipos es un poco más compleja, el código anterior realiza exactamente los mismo que el ejemplo donde utilizamos class, pero el código anterior consta de ciertos puntos de los cuales podemos destacar.
- Para poder invocar el constructor del prototipo padre “ SumaUsandoPrototype” se utiliza la sentencia call la cual llama a una función con un valor this asignado y argumentos provistos de forma individual, ya no se está utilizando super.
- Para poder crear la herencia tenemos que generar un Objeto “SumaUsandoPrototype” el cual será asignado al scope de nuestro prototipo hijo “SumaUsandoPrototype”.
- Al instanciar nuestro prototipo ya podemos tener acceso a los métodos del prototipo padre y viceversa.
Hasta este punto podemos ver muchas mejoras en el uso de clases sobre los prototipos en JS, pero las clases aún presentan otras mejoras de las cuales destacan.
get
Es una propiedad que nos permite ejecutar una función la cual se llamada cuando la propiedad es requerida, otra de sus características es que no recibe parámetros, prácticamente solo es para consulta.
set
Es una propiedad que permite ejecutar una función la cual se ejecutará para asignar un valor, otra de sus características es que solo recibe un parámetro el cual es el valor que será asignado.
static
Como en otros lenguajes de programación JS nos permite declarar un método estático el cual puede ser accedido sin la necesidad de instanciar la clase.
Al parecer estos métodos son mágicos, pero la teoría no dice mucho por lo que realizaremos un ejemplo básico para poder ver las propiedades explicada dichas en acción.
Como se puede ver en el ejemplo anterior, estamos haciendo usos de las propiedades de las clases en JS, pero en el código existen algunas cosas curiosas.
- Estamos utilizando get, set y static.
- Para poder utilizar las propiedades comentadas dentro de nuestra clase tendremos que seguir la siguiente sintaxis.
3. Para poder ejecutar los métodos que cuenten con las propiedades mencionadas se utiliza la siguiente sintaxis.
Extra: Podemos combinar las propiedades static con get o set.
Conclusión
Como podemos ver el manejo de clases en JS nos brinda muchas ventajas, pero esto no quiere decir que los prototipos no cuenten con las propias, hay que recordar que los prototipos es la manera con la se inicia el manejo de POO en JS.
En siguiente capitulo
Esta es la tercera publicación que generó durante el mes considero que nos pueden ayudar a comprender el contenido de la próxima entrada será el inicio de un pequeño taller, sin mas les comparto la imagen principal del taller que deseo armar.
Al ver la imagen que que les viene a la mente, me gustaría que compartieran sus impresiones ya sea por el sistema de comentarios de medium o por correo electrónico pueden escribirme a jorge.mendez.ortega@gmail.com.
Quedo en espera de sus comentarios :).
