Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema herencia con prototipos

Estas en el tema de Problema herencia con prototipos en el foro de Frameworks JS en Foros del Web. Hola a todos, Soy nuevo en este foro y espero que me puedan ayudar, así como poder aportar en lo que mas pueda a sus ...
  #1 (permalink)  
Antiguo 12/08/2011, 03:44
 
Fecha de Ingreso: agosto-2011
Ubicación: Santiago, Chile
Mensajes: 8
Antigüedad: 10 años, 1 mes
Puntos: 2
Pregunta Problema herencia con prototipos

Hola a todos,

Soy nuevo en este foro y espero que me puedan ayudar, así como poder aportar en lo que mas pueda a sus consultas.

Inicio con la siguiente inquietud.

Hace un tiempo ya me metí al mundo de los prototipos ya que necesito manejar una buena performance en mi proyecto, pero creo que me enredé mucho.. o tal vez tengo las típicas lagunas de programador (que a todos nos pasa de vez en cuando) en las que te caes en tonterias XD

Bueno, la pregunta es la siguiente:

Tengo el siguiente código para probar la herencia con prototipos:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <title>Untitled Document</title>
  6. <script language="javascript">
  7. $(document).ready(function(){
  8. function Maquina(nombre) {
  9.     this.nombre = nombre || "Evil Device";
  10.     this.encendida = false;
  11.     this.power = function() {
  12.                      this.encendida = !this.encendida;
  13.                      alert(this.nombre + " está ahora " + (this.encendida ? "encendido" : "apagado"));
  14.                  };
  15.     this.utilizar = function() {
  16.                         if (this.encendida) alert("Bip! durududu... pip!");
  17.                     };
  18.     this.config = {
  19.         voltaje : 100,
  20.         movimientos : {derecha:"der",izquierda:"izq",arriba:"arr",abajo:"aba"} 
  21.     };
  22. }
  23. Maquina.prototype.cambiaVoltaje = function(volts){
  24.         this.config.voltaje = volts;
  25. }
  26.  
  27. function Robot(nombre) {
  28.     this.nombre = nombre || "Evil Robot";
  29.     this.utilizar = function() {
  30.                         if (this.encendida) alert("Bip! " + this.nombre + " a sus ordenes!");
  31.                     };
  32. }
  33. Robot.prototype = new Maquina();
  34. Robot.prototype.constructor = Robot;
  35.  
  36. function Androide(nombre) {
  37.     this.nombre = nombre || "D.A.R.Y.L.";
  38.     delete this.utilizar; // Los androides son autónomos
  39.  
  40.     this.mandar = function(orden) {
  41.                       if (this.encendida) alert(orden +" es mi misión ahora, jefe!");
  42.                   };
  43.  
  44. }
  45. Androide.prototype = new Robot();
  46. Androide.prototype.constructor = Androide;
  47.  
  48.  
  49. function RobotGigante(nombre) {
  50.     this.nombre = nombre || "Ironman";
  51.    
  52.     this.utilizar = function() {
  53.                         if (this.encendida) alert("Ooops. Creo que he pisado una ciudad!");
  54.                     }
  55. }
  56. RobotGigante.prototype = new Robot();
  57. RobotGigante.prototype.constructor = RobotGigante;
  58.  
  59.  
  60. var paranoid = new Androide("Marvin");
  61. var panel = new Androide("Panel de Control");
  62. var intergalactic = new RobotGigante("Planetary");
  63. panel.cambiaVoltaje(100000000);
  64.  
  65. alert("Androide:" + paranoid.config.voltaje);
  66. alert("Maquina:" + panel.config.voltaje);
  67. alert("RobotGigante(ROBOT):" + intergalactic.config.voltaje);
  68. });
  69. </head>
  70.  
  71. </body>
  72. </html>
  73.  
  74. <!-- si copian y pegan la pagina funcionara en su totalidad //-->
cuando lo ejecuten se darán cuenta de que aunque solo instancia la función cambiaVoltaje para el objeto panel, el voltaje se cambia para todos los objetos creados (sé que si hago el cambio directamente al objeto padre deberia tener ese efecto ej: Maquina.prototype.config.voltaje = 1000000; y asi se aplicaria a todos, pero.... )

¿Por qué esta modificando paranoid e intergalactic ?

Espero me puedan ayudar y la verdad es que tengo el presentimiento de que es una tonteria que no estoy viendo.

de ante mano muchas Gracias

NOTA: el código lo saque del tutorial : http://es.debugmodeon.com/articulo/conociendo-javascript-v-orientacion-a-objetos-2-herencia-la-cadena-de-prototipos

y lo modifique para hacer las pruebas.

Última edición por iDeslocK; 12/08/2011 a las 06:54
  #2 (permalink)  
Antiguo 12/08/2011, 06:57
 
Fecha de Ingreso: agosto-2011
Ubicación: Santiago, Chile
Mensajes: 8
Antigüedad: 10 años, 1 mes
Puntos: 2
Respuesta: Problema herencia con prototipos

Ahora si funciona :P estaba apuntando a librería Jquery local.

Espero puedan ayudarme.
Salu2
  #3 (permalink)  
Antiguo 12/08/2011, 13:55
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: Problema herencia con prototipos

Lo que sucede es que no estás creando copias de la propiedad config sino "referencias". Un par de ejemplos simplificados de lo que está sucediéndote:
Código PHP:
<script type="text/javascript">
var 
a={b:2}
var 
c=a;
c.b=9;
alert(a.b);
</script> 
Código PHP:
<script type="text/javascript">
var 
a=[];
a[0]=15;
var 
c=a;
c[0]=9;
alert(a[0]);
</script> 
  #4 (permalink)  
Antiguo 12/08/2011, 14:19
 
Fecha de Ingreso: agosto-2011
Ubicación: Santiago, Chile
Mensajes: 8
Antigüedad: 10 años, 1 mes
Puntos: 2
Respuesta: Problema herencia con prototipos

Hola Panino,

Gracias por responder.

La verdad es que si se que estoy haciendo sólo referencias (para eso es que ocupo prototype) ya que la aplicación que estoy desarrollando debe ser de alta velocidad y debo crear muchos objetos como para dejar que la memoria se llene con copias, por eso ocupo javascript con prototipos.

No obstante, se supone que debería actualizar solo la propiedad del objeto que invoco la función.
  #5 (permalink)  
Antiguo 12/08/2011, 14:25
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: Problema herencia con prototipos

Escribí "referencia" entre comillas para trazar un paralelismo con lenguajes como php. A ver si puedo aclarar un poco. Fijate que estas 2 porciones de código son parecidas, pero producen resultados muy diferentes:
Código PHP:
<script type="text/javascript">
function 
uno(){
    
this.b=1;    
}
uno.prototype.setB=function(x){this.b=x}
function 
dos(){}
dos.prototype=new uno;
var 
z=new dos;
var 
x=new dos;
z.setB(100)
alert(z.b);
alert(x.b);
</script> 
Código PHP:
<script type="text/javascript">
function 
uno(){
    
this.b={a:2};    
}
uno.prototype.setB=function(x){this.b.a=x}
function 
dos(){}
dos.prototype=new uno;
var 
z=new dos;
var 
x=new dos;
z.setB(5)
alert(z.b.a);
alert(x.b.a);
</script> 
Notá la similitud con el código que posté anteriormente.
  #6 (permalink)  
Antiguo 12/08/2011, 14:55
 
Fecha de Ingreso: agosto-2011
Ubicación: Santiago, Chile
Mensajes: 8
Antigüedad: 10 años, 1 mes
Puntos: 2
Respuesta: Problema herencia con prototipos

Cita:
Iniciado por Panino5001 Ver Mensaje
Escribí "referencia" entre comillas para trazar un paralelismo con lenguajes como php. A ver si puedo aclarar un poco. Fijate que estas 2 porciones de código son parecidas, pero producen resultados muy diferentes:
Código PHP:
<script type="text/javascript">
function 
uno(){
    
this.b=1;    
}
uno.prototype.setB=function(x){this.b=x}
function 
dos(){}
dos.prototype=new uno;
var 
z=new dos;
var 
x=new dos;
z.setB(100)
alert(z.b);
alert(x.b);
</script> 
Código PHP:
<script type="text/javascript">
function 
uno(){
    
this.b={a:2};    
}
uno.prototype.setB=function(x){this.b.a=x}
function 
dos(){}
dos.prototype=new uno;
var 
z=new dos;
var 
x=new dos;
z.setB(5)
alert(z.b.a);
alert(x.b.a);
</script> 
Notá la similitud con el código que posté anteriormente.

Ya veo, pero ¿por que se comporta diferente cuando se usan objetos de notación literal, en vez de variables?. por que esa es la única diferencia, por lo que veo.

Gracias por tu ayuda.
saludos.
  #7 (permalink)  
Antiguo 13/08/2011, 07:08
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: Problema herencia con prototipos

Cita:
¿por que se comporta diferente cuando se usan objetos de notación literal, en vez de variables?.
Es una característica del lenguaje. Una vez que se sabe esto, la solución es sencilla.
De la misma forma en que esto:
Código PHP:
<script type="text/javascript">
var 
a={b:2}
var 
c=a;
c.b=9;
alert(a.b);//9
</script> 
Puede solucionarse así:
Código PHP:
<script type="text/javascript">
var 
a={b:2}
var 
c=a;
c={b:9};
alert(a.b);//2
</script> 
Esto (y lo mismo tu ejemplo):
Código PHP:
<script type="text/javascript">
function 
uno(){
    
this.b={a:2};    
}
uno.prototype.setB=function(x){this.b.a=x}
function 
dos(){}
dos.prototype=new uno;
var 
z=new dos;
var 
x=new dos;
z.setB(5)
alert(z.b.a);
alert(x.b.a);
</script> 
Puede solucionarse así:
Código PHP:
<script type="text/javascript">
function 
uno(){
    
this.b={a:2};    
}
uno.prototype.setB=function(x){this.b={a:x};}
function 
dos(){}
dos.prototype=new uno;
var 
z=new dos;
var 
x=new dos;
z.setB(5)
alert(z.b.a);
alert(x.b.a);
</script> 
  #8 (permalink)  
Antiguo 14/08/2011, 02:06
 
Fecha de Ingreso: agosto-2011
Ubicación: Santiago, Chile
Mensajes: 8
Antigüedad: 10 años, 1 mes
Puntos: 2
Respuesta: Problema herencia con prototipos

Hola Panino,

¿Me podrías dar alguna fuente de donde poder leer eso que dices es una característica del lenguaje?, la verdad me gustaría entender el porqué desde su raíz y creo que leer específicamente como se comporta el lenguaje en esas características, me ayudaría mucho.

Muchas gracias por tu ayuda
Salu2.
  #9 (permalink)  
Antiguo 14/08/2011, 04:06
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: Problema herencia con prototipos

http://www.ecma-international.org/pu...T/Ecma-262.pdf (11.1.5)
  #10 (permalink)  
Antiguo 14/08/2011, 17:24
 
Fecha de Ingreso: agosto-2011
Ubicación: Santiago, Chile
Mensajes: 8
Antigüedad: 10 años, 1 mes
Puntos: 2
Respuesta: Problema herencia con prototipos

Maestro!!

Me queda mucho mas claro ahora.

Lo que pasa es que al crear:

function uno(){
this.b={a:2};
}

this.b es igual a un nuevo objeto con atributo a = 2

luego en

uno.prototype.setB=function(x){this.b={a:x};}

this.b = {a:x} no hace referencia al atributo a de b, si no que a b le asigna un nuevo objeto con atributo a = x;

Entonces... esto no me sirve para poder manejar múltiples atributos para uno.b .

¿hay alguna forma de crear atributos que sean parte del prototipo y otras no?
por que una cosa es mejorar el rendimiento solo instanciando al Objeto en vez de generar multiples copias, pero se podría sólo instanciar parte del objeto y otra parte crearse como nuevos atributos de la nueva instancia?

Saludos.

Etiquetas: herencia, html, javascript, jquery, js, prototipos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:08.