Bienvenidos sean a este post, hoy veremos un tema muy particular.
Este es un simple repaso/comentario sobre como en Javascript podemos manejar dos temas que son fundamentales en OOP como son las clases y las herencias, si bien estos no son originales del lenguaje mediante el ES2015 se agrego una forma muy similar a otros lenguajes para tener la misma conducta, veamos la sintaxis de una clase:
class nombre {
constructor(argumentos) {
... instrucciones ...
}
nombre_metodo() { ... instrucciones ... }
}
Esta es una estructura basica, a diferencia de otros lenguajes el constructor se lo denomina de esa forma, en este de manera opcional podemos recibir valores en los argumentos, los cuales nos pueden servir para iniciar a las propiedades (variables) de la clase, despues y luego podemos definir los metodos (funciones) de la clase los cuales nos permiten realizar acciones para nuestra clase, para entender el concepto vamos a crear un ejemplo, para ello primero crearemos un archivo con el nombre de clase.mjs y le agregaremos el siguiente codigo:
clase.mjs
export class Animal {
constructor(edad, peso) {
this._edad = edad;
this._peso = peso;
}
set edad(nueva) { return this._edad = nueva; }
get edad() { return this._edad; }
set peso(nuevo) { return this._peso = nuevo; }
get peso() { return this._peso; }
}
En este caso definimos una clase llamada Animal pero que le antepondremos la palabra export para que podamos acceder desde otro archivo, luego tenemos el constructor que recibira dos valores, y sera para establecer dos valores pero con una particularidad, estos tiene antepuesto el guion bajo lo cual indicara que se puede acceder publicamente, en este caso al ser un ejemplo practico no nos interesa esconderlo pero lo mas recomendable es que no se pueda acceder publicamente pero sobre esto hablaremos mas adelante, despues tenemos los metodos set y get de cada propiedad, donde estableceremos el nuevo valor que le pasemos mediante el set y el get devolvera el valor que contenga, y en todos los casos usamos a this para que maneje los datos de cada objeto creado desde esta clase, esta forma de trabajar en otros lenguajes se denomina como getter and setter, ahora vamos a crear el codigo para poder usar esta clase, para ello crearemos otro archivo con el nombre de ejemplo.mjs en el mismo directorio que el codigo anterior y le agregaremos el siguiente codigo:
ejemplo.mjs
import { Animal } from './clase.mjs';
const animal = new Animal(7,30);
console.log(animal.edad);
console.log(animal.peso);
animal.peso = 28;
console.log(animal.peso);
La primera linea sera la encargada de importar la clase del archivo anterior, lo siguiente sera crear un objeto mediante el constructor new y le pasaremos dos valores, lo siguiente sera mostrar los valores de estos mediante el console.log, despues estableceremos un nuevo valor para la propiedad peso y lo mostraremos nuevamente, veamos como es la salida:
$ node ejemplo.mjs
7
30
28
$
Aqui podemos ver como nos muestra los valores iniciales al momento de crear el objeto y luego en el nuevo valor al establecerlo, ahora vamos a hablar sobre la herencia.
Al igual que en Java este se hace mediante la palabra extends, veamos como es su sintaxis:
class nombre extends clase_madre {
... el resto es igual a una clase ...
}
Es similar a una clase comun pero agregamos la palabra extends seguido del nombre de la clase madre, el resto puede ser de la misma forma que la clase anterior, en este al igual que en otros lenguajes podemos agregar mas metodos o propiedades o anular los anteriores y reemplazarlos por unos propios, para entender el concepto vamos a tomar el archivo clase.mjs y lo modificaremos de la siguiente manera:
class Animal {
constructor(edad, peso) {
this._edad = edad;
this._peso = peso;
}
set edad(nueva) { return this._edad = nueva; }
get edad() { return this._edad; }
set peso(nuevo) { return this._peso = nuevo; }
get peso() { return this._peso; }
}
export class Perro extends Animal {
constructor(edad, peso, nombre) {
super(edad, peso);
this._nombre = nombre;
}
set nombre(n) { return this._nombre = n; }
get nombre() { return this._nombre; }
ladrar() { return "Guau!"; }
}
La primera modificacion fue sacar el export a la que sera la clase madre (Animal), en este caso salvo por esto el resto es exactamente igual a lo visto anteriormente, la modificacion radica en la nueva clase donde la hicimos «heredera» de la anterior y a su vez esta podremos importarla desde el otro codigo, la primera modificacion es en el constructor donde tenemos el super con las propiedades de la clase madre y la nueva propiedad que tendremos, un detalle que deben observar es que el orden debe ser el msmo con respecto al constructor de la clase madre, y en la clase hija repetimos la misma estructura para el nuevo dato, el seteo en el constructor y los metodos getter and setter en esta pero le agregaremos un nuevo metodo llamado ladrar y este solo devolvera esa cadena de texto, ahora si podemos pasar al archivo ejemplo.mjs y modifiquemos el codigo de la siguiente manera:
import { Perro } from './clase.mjs';
const perro = new Perro(10,30,'Arturo');
console.log(perro.nombre);
console.log(perro.edad);
console.log(perro.peso);
console.log(perro.ladrar());
Si lo comparamos con el anterior es similar pero con pequeñas diferencias, la primera es la importacion de la clase, ahora es Perro en lugar de Animal, despues el objeto es otro y ahora pasamos tres valores, para finalmente mostrar los tres valores del objeto y el llamado al metodo que agregamos en esta clase, veamos como es su salida:
$ node ejemplo.mjs
Arturo
10
30
Guau!
$
Observen como nos devolvio los cuatro valores pero lo mas importante como la nueva clase pudo utilizar los datos de la clase madre, adicionar los de la clase propia e implementar su propio metodo, es decir que Perro es la «heredera» de la clase Animal, los ultimos detalles antes de terminar son:
- La herencia es simpre hacia abajo nunca para arriba
- Podemos tener herederos de herederos
- La herencia solo puede provenir de una madre
En lenguajes mas poderosos existe la posibildad de poder tener mas de una clase madre pero aqui no podremos, y esto lo veremos mas a menudo a partir del proximo post.
En resumen, hoy hemos visto como son las clases en Javascript, mediante ES6/ES2015, tambien hemos visto como construir un objeto, para luego ver el concepto de herencia, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.


Donación
Es para mantenimento del sitio, gracias!
$1.50
