Autor Tema: JavaScript Herencia cómo funciona y cómo se incorpora en código ejemplo CU01149E (Leído 4452 veces)

Dimitar Stefanov · « **en:** 19 de Febrero 2016, 19:49 »

Buenas tardes.

Aquí dejo el código de la posible solución del ejercicio CU01149E del curso JavaScript desde cero.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">

		function hortaliza(){
			this.componentePrincipal='Agua';
			this.movilidad='Ser vivo sin movilidad';
		}

		function tomate(){
			this.calorias=39;
			this.nombreCientifico='desconocido';
		}
			
		tomate.prototype= new hortaliza();
		

		function lechuga(){
			this.calorias=31;
			this.nombreCientifico='desconocido';
		}

		lechuga.prototype= new hortaliza();
		

		function zanahoria(){
			this.calorias=45;
			this.nombreCientifico='desconocido';
		}

		zanahoria.prototype= new hortaliza();
		

		function ejemploObjetos(){
			var tomate1 = new tomate();
			alert('El objeto la propiedad tipoHortaliza del objeto tomate1 tiene como valor: '+tomate1.tipoHortaliza);
			
			alert('La propiedad movilidad del objeto tomate1 es: '+tomate1.movilidad);

		}

	</script>
</head>
<body>
	<div id="cabecera">
		<h2>Cursos aprenderaprogramar.com</h2>
		<h3>Ejemplos JavaScript</h3>
	</div>
	<div style="color: blue;" id="pulsador" onclick="ejemploObjetos()">Probar Ejercicio</div>
</body>
</html>

Gracias

pedro,, · « **Respuesta #1 en:** 20 de Febrero 2016, 01:24 »

Hola dimiste.

El ejercicio está incompleto, le faltan bastantes cosas.

Si te sirve de ayuda, échale un vistazo a esta solución...

https://www.aprenderaprogramar.com/foros/index.php?topic=3941.msg16751#msg16751

Saludos.

Dimitar Stefanov · « **Respuesta #2 en:** 20 de Febrero 2016, 10:24 »

Buenos días, Pedro.

Sinceramente, no entendí muy bien qué pedía el ejercicio. He corregido el ejercicio mirando de ejemplo la solución de "bermantinv", tal y como me dijiste.

El código quedaría así:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">
		function vegetal(){
			this.movilidad = 'ser vivo sin movilidad';
		}

		function plantaCultivada(){
			this.nombreCientifico = 'desconocido';
		}
		plantaCultivada.prototype = new vegetal();

		function hortaliza(){
			this.tipoHortaliza = 'indefinido';
			this.componentePrincipal = 'Agua';
		}
		hortaliza.prototype = new plantaCultivada();

		function tomate(){
			this.calorias = 39;
		}	
		tomate.prototype= new hortaliza();
		

		function lechuga(){
			this.calorias = 31;
		}
		lechuga.prototype = new hortaliza();
		

		function zanahoria(){
			this.calorias = 45;
		}
		zanahoria.prototype = new hortaliza();
		

		function ejemploObjetos(){
			var tomate1 = new tomate();
			alert('La propiedad movilidad del objeto tomate1 es: '+tomate1.movilidad);
		}

	</script>
</head>
<body>
	<div id="cabecera">
		<h2>Cursos aprenderaprogramar.com</h2>
		<h3>Ejemplos JavaScript</h3>
	</div>
	<div style="color: blue;" id="pulsador" onclick="ejemploObjetos()">Probar Ejercicio</div>
</body>
</html>

Sólo una cuestión me queda un poco floja. Qué diferencia hay entre:

Código: [Seleccionar]

function hortaliza(){
			this.tipoHortaliza = 'indefinido';
			this.componentePrincipal = 'Agua';
		}
		hortaliza.prototype = new plantaCultivada();

y

Código: [Seleccionar]

function hortaliza(){
			this.tipoHortaliza = 'indefinido';
		}
		hortaliza.prototype = new plantaCultivada();
		hortaliza.prototype.componentePrincipal = 'Agua';

No se supone que será lo mismo, para los objetos subtipo, que la la propiedad "componentePrinicpal" este inicializada como una propiedad específica del objeto supertipo que abajo como prototipo del mismo objeto.

Me baso en la teoría donde dice:

Citar

El objeto prototype existe como objeto vacío desde que se crea una instancia. ¿Por qué? Porque JavaScript lo crea en segundo plano, como si incluyéramos dentro del código de la clase la sentencia: prototype = {};

Uf, si ese ejercicio lo tenía mal entendido, el siguiente que colgaré (que será en breve) ni me quiero imaginar como lo he hecho, jejejej:)

Saludos.

bermartinv · « **Respuesta #3 en:** 20 de Febrero 2016, 10:49 »

Hola dimiste, la verdad que cuestaun poco al principio entender un poco las herencias.
Yo te recomiendo que la estructura primero la dibujes en papel. Como si fuera un <div> dentro de otro <div>, y dentro de este otro <div>. El div que está mas dentro del cuadrado hereda de todos los demas, y que está más afuera no hereda de nadie.
Creo recordar que en CSS se llama herencia y cascada.
Respecto a lo que preguntas, cuando defines un objeto habrá variables que podrán ser modificadas cada vez que sean heredadas, por ejemplo :
1.Un tomate cuando herede 'nombreCientifico' no tendrá el mismo valor que si creamos una lechuga o un pimiento, y tendremos que modificarlo cada vez que creeemos una plantaCultivada.
2.Todas las hortalizas que creemos tendrán la misma propiedad de 'movilidad' del objeto vegetal , ya que a no hay ninguna hortaliza que tenga patas y se mueva, y entonces es cuando creamos una característica común para todos los vegetales.

Código: [Seleccionar]

vegetal.prototype.movilidad ="ser vivo sin movilidad"
Recuerda que todas aquellas características que sean comunes se crearan con su respectivo prototype y aquellas que serán modificadas estarán en la definición del objeto.

Cuando lo entiendas tendrás que modificar el código que volviste a colgar. Ya verás como poco a poco lo vas viendo más facil. Al principio la cabeza se lia un poco.Te recomiendo que hagas esquemas como el del foro

Dimitar Stefanov · « **Respuesta #4 en:** 20 de Febrero 2016, 12:01 »

Buenas, bermartinv.

Gracias por la explicaciones tan extensa, pero sinceramente, si al principio no se me explican las cosas así, no hay manera de que las entienda, jejeje.

Si no he entendido mal, quieres decir que si yo quiero que una propiedad se quede sin modifcaciones siempre la tendré que poner como sigue:

objetoDeseado.prototype.propiedad = valorDeLaPropiedad;

Y si quiero que se modifique la tendría que inicializar en el objeto como una propiedad específica suya. O no? Madre mía, que lío, jejeje. Pero es lo que dices tú, ahora todo lo veo un lío que no veas, pero luego, espero y deseo, lo veré mucho más claro. Lo mismo me pasaba cuando estudiaba el CSS.

Sobre los esquemas, si vieras, tengo todo el escritorio lleno de papelitos con esquemas, pero aún no hay manera, jejejeje.

Es verdad, podría pasar rápido esta entrega e irme a la siguiente, pero si no la he entendido bien, de que me serviría? Además, creo que es un tema muy importante para poder programar después con JavaScript. Es más, a veces, me da la curiosidad de mirar códigos más complejos (creo que a todos los que nos gusta esto) y veo que allí se pasan datos y parámetros de una función a otro como si no costara, jejejeje.

Así que a repasar el código y a ver donde me he equivocado (otra vez). Pero de desanimar, no me desanimo, al fin y al cabo quien no erra no aprende:)

Saludos y gracias

Dimitar Stefanov · « **Respuesta #5 en:** 20 de Febrero 2016, 12:10 »

bermartinv,

creo que me quieres decir que el código tiene que ser así:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">
		function vegetal(){
			this.movilidad = 'ser vivo sin movilidad';
		}

		function plantaCultivada(){
			this.nombreCientifico = 'desconocido';
		}
		plantaCultivada.prototype = new vegetal();

		function hortaliza(){
			this.tipoHortaliza = 'indefinido';
		}
		hortaliza.prototype = new plantaCultivada();
		hortaliza.prototype.componentePrincipal = 'Agua';

		function tomate(){
			this.calorias = 39;
		}	
		tomate.prototype= new hortaliza();
		

		function lechuga(){
			this.calorias = 31;
		}
		lechuga.prototype = new hortaliza();
		

		function zanahoria(){
			this.calorias = 45;
		}
		zanahoria.prototype = new hortaliza();
		

		function ejemploObjetos(){
			var tomate1 = new tomate();
			alert('La propiedad movilidad del objeto tomate1 es: '+tomate1.movilidad);
		}

	</script>
</head>
<body>
	<div id="cabecera">
		<h2>Cursos aprenderaprogramar.com</h2>
		<h3>Ejemplos JavaScript</h3>
	</div>
	<div style="color: blue;" id="pulsador" onclick="ejemploObjetos()">Probar Ejercicio</div>
</body>
</html>

pero es que no veo la diferencia entre:

Código: [Seleccionar]

function hortaliza(){
			this.tipoHortaliza = 'indefinido';
		}
		hortaliza.prototype = new plantaCultivada();
		hortaliza.prototype.componentePrincipal = 'Agua';

y

Código: [Seleccionar]

function hortaliza(){
			this.tipoHortaliza = 'indefinido';
			this.componentePrincipal = 'Agua';
		}
		hortaliza.prototype = new plantaCultivada();

Intenté dibujarme todo lo que me explicaste, pero al ser "tomate", "lechuga" y "zanahoria" subobjetos del objeto "hortaliza", no heredan todos la propiedad "componentePrincipal" del mismo? Sea inicializada en el objeto o como "hortaliza.prototye.componentePrincipal". Uf, debo de ser tonto, porque aún no veo la diferencia

Saludos

Dimitar Stefanov · « **Respuesta #6 en:** 20 de Febrero 2016, 12:21 »

Creo que lo tengo un poquito más claro. Creo que tiene que ver algo con esto:

Citar

Dado que las propiedades y métodos comunes (“de clase”) en JavaScript se establecen a través del prototipo, usar un mismo objeto como prototipo para los profesores interinos y los profesores titulares nos impediría diferenciar propiedades comunes exclusivas de los profesores interinos y propiedades comunes exclusivas de los profesores titulares. Si el prototipo es un mismo objeto, las propiedades comunes lo serían tanto para profesores interinos como para profesores titulares.

bermartinv · « **Respuesta #7 en:** 20 de Febrero 2016, 15:28 »

El código del ejercicio ahora si funciona.
Respecto a los codigos que preguntas:

Código:

Código: [Seleccionar]

function hortaliza(){
			this.tipoHortaliza = 'indefinido';
		}
		hortaliza.prototype = new plantaCultivada();
		hortaliza.prototype.componentePrincipal = 'Agua';

Para ese código, el objeto tiene una características que deberemos definir cada vez que usemos la herencia, pero que aunque no se haga referencia directa, si que existe, y su valor será 'tipoHortaliza='indefinido'.
Tiene una característica común que hace falta que le des ningun valor porque ya está definido y todos los nuevos objetos que crees tendrán esa característica común.
y 'hortaliza.prototype = new plantaCultivada();' , es la creación de herencia entre objetos.

Código:

Código: [Seleccionar]


function hortaliza(){
			this.tipoHortaliza = 'indefinido';
			this.componentePrincipal = 'Agua';
		}
		hortaliza.prototype = new plantaCultivada();

En este caso tiene dos características que podemos definir o no porque los valores están inicializados tipoHortaliza y componentePrincipal.
hortaliza.prototype = new plantaCultivada(); --> es la creación de la herencia.

Dimitar Stefanov · « **Respuesta #8 en:** 20 de Febrero 2016, 17:32 »

Gracias por dedicarme tanto tiempo, bermartinv.

Ahora creo que me he enterado (hasta el siguiente ejercicio, que la volveré a liar, jejeje)

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: JavaScript Herencia cómo funciona y cómo se incorpora en código ejemplo CU01149E (Leído 4452 veces)

Dimitar Stefanov

JavaScript Herencia cómo funciona y cómo se incorpora en código ejemplo CU01149E

pedro,,

Re:CU01149E JavaScript Herencia

Dimitar Stefanov

Re:CU01149E JavaScript Herencia

bermartinv

Re:CU01149E JavaScript Herencia

Dimitar Stefanov

Re:CU01149E JavaScript Herencia

Dimitar Stefanov

Re:CU01149E JavaScript Herencia

Dimitar Stefanov

Re:CU01149E JavaScript Herencia

bermartinv

Re:CU01149E JavaScript Herencia

Dimitar Stefanov

Re:CU01149E JavaScript Herencia

Preguntas y respuestas