Javascript / Herencia

Bienvenidos sean a este post, hoy hablaremos sobre una de las conductas mas interesantes que poseen los objetos como es la herencia, pero que es la herencia?

Podemos llamar a herencia como el mecanismo que permite a un objeto creado desde otro objeto tener la capacidad de poder usar los metodos y propiedades del objeto original

En el objeto hijo pero a su vez puede tener sus propios metodos, este mecanismo es muy utilizado en lenguajes orientados a objetos (p.e. C, C++, Java).

En Javascript para lograr la herencia debemos usar prototipos, esto significa que un objeto no hereda propiedades y metodos de otros objetos directamente, y si bien trabajar con prototipos puede ser algo confuso en Javascript tenemos un metodo muy interesante llamado 279áximo() para simplificar nuestra tarea, este metodo es parte de un objeto global predefinido en el lenguaje llamado Object, este metodo trabaja utilizando un objeto ya existente como prototipo de uno nuevo y esto nos proporcionara la posibilidad de poder crear objetos a partir de otros objetos sin necesidad de preocuparnos de como se comparten entre ellos los metodos y las propiedades, analicemos el siguiente ejemplo:

var objeto = {
	nombre: "Martin",
	profesion: "Programador",
	mostrarNombre: function(){
		document.write(this.nombre);
	},
	cambiarNombre: function(nombre){
		this.nombre = nombre;
	}
};

var empleado = Object.create(objeto);
empleado.cambiarNombre("Enzo");
empleado.mostrarNombre();
objeto.mostrarNombre();

En este caso tenemos el objeto llamado objeto donde le agregaremos dos propiedades y dos metodos, una para mostrar la propiedad nombre y otro para cambiar dicha propiedad, una vez hecho esto cerramos nuestro objeto, luego creamos una variable llamada empleado, a la cual definiremos por medio de Object y el metodo create para crear nuestro «heredero» del objeto que creamos anteriormente, despues llamaremos al metodo cambiarNombre donde modificaremos el valor de la propiedad nombre para luego llamar dos veces a mostrarNombre pero primero sobre el objeto «heredero», la cual nos mostrara al nuevo valor (Enzo), en el segundo caso nos mostrara el dato inicial de nombre (Martin) porque nosotros modificamos solamente al objeto heredero, tomando el objeto anterior (objeto) vamos a usar la siguiente implementacion:

var empleado = Object.create(objeto);
empleado.profesion = "blogger";

objeto.mostrarProfesion = function(){
	document.write(this.profesion);
	};

empleado.mostrarProfesion();

En este caso volvemos a crear una variable llamada empleado y creamos la herencia como en el caso anterior pero ahora primero modificaremos el valor de la propiedad profesion en el objeto heredero, nuestro siguiente paso sera crear un nuevo metodo en el objeto padre, en herencia habitualmente a la clase u objeto que se usa como origen se lo llama padre y a los descendientes herederos o hijos/as, en ella crearemos un metodo llamado mostrarProfesion por medio de una funcion anonima la cual se encargara de mostrar el valor de profesion, cerramos esta funcion y luego la llamamos desde el objeto heredero y sorpresa no solamente va a funcionar sino a su vez nos mostrara el nuevo valor de profesion en empleado, esto se debe a que nosotros al modificar el objeto padre automaticamente lo hara disponible para todos sus herederos (una de las maravillas de herencia) sin necesidad de grandes modificaciones o implementaciones, con esto cubrimos lo basico del metodo 279áximo() pero tambien disponemos de otro metodo llamado 280áximo() que es muy similar al anterior pero a su vez nos permite tomar un objeto y convertirlo en el prototipo de uno nuevo, lo cual nos permite crear una cadena de objetos que heredan las propiedades y metodos de sus predecesores, veamos el siguiente ejemplo tomando de nuevo a objeto:

var empleado1 = Object.create(objeto);
var empleado2 = Object.create(empleado1);
var empleado3 = Object.create(empleado2);

empleado2.mostrarProfesion = function(){
	document.write(this.profesion);
	};

empleado3.profesion = "blogger";
empleado3.mostrarProfesion();

En este caso crearemos tres objetos, el primero heredero de objeto, el segundo heredero de empleado1, y el tercero heredero de empleado2, esto no solamente implica que todos son herederos de objeto sino a su vez adquieren las propiedades y metodos de los objetos anteriores (en caso de tener algunos adicionales), nuestro siguiente paso sera crear el metodo para mostrar el valor de profesion (mostrarProfesion) pero lo haremos para empleado2, en lugar de objeto, esto implica que solamente estara disponible para empleado2 y empleado3 por ser heredero de dicho objeto, nuestro siguiente paso sera modificar el valor de profesion en empleado3 y luego llamamos a mostrarProfesion desde empleado3 el cual nos devolvera el nuevo valor de profesion y esto gracias a que heredo el metodo del objeto anterior, para entender mejor el concepto veamos el siguiente ejemplo:

herencia.html

<html>
<script language="javascript">
<!--

document.title="Herencia";
var persona = {
	nombre: "Martin",
	profesion: "blogger",
	mostrar: function(){
		document.write("Nomnre: " + this.nombre + "<br>");
		document.write("Profesion: " + this.profesion + "<br>");
	}
};

document.write(">>Primer caso herencia directa:<br>");
var empleado = Object.create(persona);
empleado.mostrar();
document.write("<br>>>Segundo caso herencia:<br>");
persona.mostrarprofesion = function(){
	document.write(this.profesion);
};
empleado.profesion="Programador";
document.write("Profesion de empleado: ");
empleado.mostrarprofesion();
document.write("<br>Profesion de persona: ");
persona.mostrarprofesion();
document.write("<br><br>>>Tercer caso herencia:<br>");
var empleado1=Object.create(persona);
var empleado2=Object.create(empleado1);
var empleado3=Object.create(empleado2);
empleado1.edad=32;
empleado2.mostraredad = function(){
	document.write(this.edad);
};
empleado2.mostrar = function(){
	document.write("Nombre: " + this.nombre);
	document.write("<br>Edad: " + this.edad);
	document.write("<br>Profesion: " + this.profesion);
};
empleado3.edad=43;
empleado2.profesion="Programador";
document.write("Edad de empleado3: ");
empleado3.mostraredad();
document.write("<br><br>>>Datos de empleado3:<br>");
empleado3.mostrar();
document.write("<br><br>>>Datos de persona:<br>");
persona.mostrar();
//-->
</script>
</html>

En este codigo hice un objeto padre llamado persona, con dos propiedades (nombre y profesion) y un metodo (mostrar) asi que recuerden esto porque mas adelante se pondra interesante, analicemos el primer caso:

document.write(">>Primer caso herencia directa:<br>");
var empleado = Object.create(persona);
empleado.mostrar();

En este caso notificamos en pantalla que es el primer caso, luego creamos un objeto llamado empleado heredero de persona y simplemente mostramos los valores de las propiedades heredadas, simple y conciso pasemos a analizar el segundo caso:

document.write("<br>>>Segundo caso herencia:<br>");
persona.mostrarprofesion = function(){
	document.write(this.profesion);
};
empleado.profesion="Programador";
document.write("Profesion de empleado: ");
empleado.mostrarprofesion();
document.write("<br>Profesion de persona: ");
persona.mostrarprofesion();

Para este caso agregamos una nueva funcion llamada mostrarprofesion al objeto padre por lo cual empleado automaticamente la heredara, despues modificamos el valor de profesion en empleado, para nuestro siguiente paso mostraremos el valor de profesion en empleado y luego en persona, con lo cual deberemos tener dos valores distintos pero lo veremos cuando observemos la salida, pasemos al tercer caso:

document.write("<br><br>>>Tercer caso herencia:<br>");
var empleado1=Object.create(persona);
var empleado2=Object.create(empleado1);
var empleado3=Object.create(empleado2);
empleado1.edad=32;
empleado2.mostraredad = function(){
	document.write(this.edad);
};
empleado2.mostrar = function(){
	document.write("Nombre: " + this.nombre);
	document.write("<br>Edad: " + this.edad);
	document.write("<br>Profesion: " + this.profesion);
};
empleado3.edad=43;
empleado2.profesion="Programador";
document.write("Edad de empleado3: ");
empleado3.mostraredad();
document.write("<br><br>>>Datos de empleado3:<br>");
empleado3.mostrar();
document.write("<br><br>>>Datos de persona:<br>");
persona.mostrar();

Este va a ser un poco mas complejo pero el mas jugoso porque en este crearemos tres objetos herederos, el primero sera de persona (empleado1), el siguiente de empleado1 (empleado2) y el tercero de empleado2 (empleado3), para nuestro siguiente paso crearemos una nueva propiedad para empleado1 llamada edad y le asignaremos un valor, despues en empleado2 crearemos un metodo llamado mostraredad el cual se encargara de mostrar el valor de edad en empleado2 y empleado3 por ser heredero del anterior pero en empleado1 no existira por no heredar a empleado2, por ultimo en empleado2 modificaremos al metodo mostrar el cual es heredado desde persona pero en este caso lo usaremos para mostrar el valor de nombre, profesion y edad, como lo creamos en empleado2 solamente afectara a empleado2 y empleado3, el resto de los objetos no notara este cambio, para chequear todo esto haremos un par de modificaciones y luego comprobaremos, primero cambiaremos el valor de edad en empleado3 y luego cambiaremos el valor de profesion en empleado2, nuestro siguiente paso sera mostrar la edad de empleado3, para luego usar mostrar en empleado3 y por ultimo usar a mostrar en persona, procedamos a probar este codigo para ver su salida

Observen como el primer caso nos paso todos los valores del objeto padre al objeto hijo, en el segundo caso como cambiamos del objeto empleado con respecto a persona y en el ultimo caso podemos ver como empleado3 heredo de empleado1 (gracias a empleado2) la propiedad edad, como el cambio de profesion en empleado2 fue heredado por empleado3, por no especificar uno nuevo, y por ultimo podemos ver como mostrar se modifico para empleado2 y empleado3 pero no para los objetos anteriores.

En resumen, hoy hemos hablado sobre una de las herramientas mas importantes en cualquier lenguaje de programacion como es herencia, su naturaleza mas basica, su sintaxis mas basica, como se hace realmente, hemos hablado como en Javascript nos puede facilitar la tarea si es usado sabiamente, hemos visto tres tipos de herencias, las modificaciones que podemos hacer sobre los objetos padres, como baja a sus hijos y como modificar un metodo padre sin afectarlo pero si para el resto, espero les haya sido util 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.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.