Problema herencia con prototipos

iDeslocK · #1 (**permalink**) 12/08/2011, 03:44

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Untitled Document</title>
<script language="javascript">
$(document).ready(function(){
function Maquina(nombre) {
    this.nombre = nombre || "Evil Device";
    this.encendida = false;
    this.power = function() {
                     this.encendida = !this.encendida;
                     alert(this.nombre + " está ahora " + (this.encendida ? "encendido" : "apagado"));
                 };
    this.utilizar = function() {
                        if (this.encendida) alert("Bip! durududu... pip!");
                    };
    this.config = {
        voltaje : 100,
        movimientos : {derecha:"der",izquierda:"izq",arriba:"arr",abajo:"aba"}  
    };
}
Maquina.prototype.cambiaVoltaje = function(volts){
        this.config.voltaje = volts;
}
 
function Robot(nombre) {
    this.nombre = nombre || "Evil Robot";
    this.utilizar = function() {
                        if (this.encendida) alert("Bip! " + this.nombre + " a sus ordenes!");
                    };
}
Robot.prototype = new Maquina();
Robot.prototype.constructor = Robot;
 
function Androide(nombre) {
    this.nombre = nombre || "D.A.R.Y.L.";
    delete this.utilizar; // Los androides son autónomos
 
    this.mandar = function(orden) {
                      if (this.encendida) alert(orden +" es mi misión ahora, jefe!");
                  };
 
}
Androide.prototype = new Robot();
Androide.prototype.constructor = Androide;
 
 
function RobotGigante(nombre) {
    this.nombre = nombre || "Ironman";
    
    this.utilizar = function() {
                        if (this.encendida) alert("Ooops. Creo que he pisado una ciudad!");
                    }
}
RobotGigante.prototype = new Robot();
RobotGigante.prototype.constructor = RobotGigante;
 
 
var paranoid = new Androide("Marvin");
var panel = new Androide("Panel de Control");
var intergalactic = new RobotGigante("Planetary");
panel.cambiaVoltaje(100000000);
 
alert("Androide:" + paranoid.config.voltaje);
alert("Maquina:" + panel.config.voltaje);
alert("RobotGigante(ROBOT):" + intergalactic.config.voltaje);
});
</script>
</head>
 
<body>
</body>
</html>
 
<!-- 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.

iDeslocK · #2 (**permalink**) 12/08/2011, 06:57

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

Espero puedan ayudarme.
Salu2

Panino5001 · #3 (**permalink**) 12/08/2011, 13:55

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>

iDeslocK · #4 (**permalink**) 12/08/2011, 14:19

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.

Panino5001 · #5 (**permalink**) 12/08/2011, 14:25

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.

iDeslocK · #6 (**permalink**) 12/08/2011, 14:55

Cita:

Iniciado por Panino5001

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.

Panino5001 · #7 (**permalink**) 13/08/2011, 07:08

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>

iDeslocK · #8 (**permalink**) 14/08/2011, 02:06

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.

Panino5001 · #9 (**permalink**) 14/08/2011, 04:06

http://www.ecma-international.org/pu...T/Ecma-262.pdf (11.1.5)

iDeslocK · #10 (**permalink**) 14/08/2011, 17:24

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.