AddEventListener + Objetos = Toda La noche en Vela sin Solución a la Vista

Albuss · #1 (**permalink**) 18/09/2013, 02:28

Buenas caballeros,

Llevo toda la noche despierto intentando resolver un paradigma que yo mismo he creado dentro de una aplicacion web que estoy desarrollando, expongo un ejemplo simplificado de dicho error y un link a jsFiddle listo para ejecutar.

Ovbiamente esto va de alcances de los objetos, mi problema reside en que ...., bueno, es mas engorroso explicarlo que enseñarlo, asi que directamente expongo un ejemplo simplificado lo máximo posible pero que sigue conteniendo el error

Código Javascript:

Ver originalfunction prototype(id){ 
    
    this.ID = id;
        
 
this.CrearDiv = function CrearDivs(){
        
        ID_DuplicoLaVariableParaElAlcanceDelaPila = this.ID;
        
        Capa = document.getElementById('espacioPrueva');
        DivPrueva = document.createElement('div');
        DivPrueva.style.width = 200+'px';
        DivPrueva.style.height = 200+'px';
        DivPrueva.style.margin = '10px 10px';
        DivPrueva.style.background = 'hsla(120,100%,50%,1)';
        Capa.appendChild(DivPrueva);
      
        DivPrueva.addEventListener("mouseover", function () {console.log(  ['ObjetoPrueva'+ID_DuplicoLaVariableParaElAlcanceDelaPila] ) }, false); // Aquí reside lo importante, al pasar el mouse, deberia de devolver el objeto correcto en el cual el rectángulo ha sido creado, solo devuelve el ultimo objeto creado ¿por que se sobrescriben? si solo crease un rectángulo aparecería en la consola el objeto uno
    
}
 
var ObjetoPruevaUno = new  prototype(1);
ObjetoPruevaUno.CrearDiv();
 
var ObjetoPruevaDos = new  prototype(2);
ObjetoPruevaDos.CrearDiv();

Código HTML:

Ver original<body>
<div id="espacioPrueva"></div>
</body>

El experimento para hayar el error es sencillo, pasar el mouse por encima de los dos rectángulos creados ¿que obtendremos? pues siempre obtendremos el ultimo objeto creado en el log de la consola, es decir, me es imposible crear mediante este metodo una forma de devolver el objeto correcto del rectangulo, que seria 1 y 2 respectivamente, cuando en este ejemplo en la consola siempre veremos que nos devuelve el objeto 2 ¿por que?

Adjunto un link a JSFiddle con un ejemplo interactivo y listo : http://jsfiddle.net/yRk3j/1/

zerokilled · #2 (**permalink**) 18/09/2013, 08:14

buenas...

el problema que tienes no es de alcance —scope— de variables. sino que estás creando variables globales que se sobreescriben cada vez que invocas el método del objeto. mi recomendación es que siempre trabajes con variables locales, a no ser que realmente necesites una variable global. utilizando variables locales te evitas posibles fallos como el presente.

Código:

function prototype(id){	
    this.ID = id;
    this.CrearDiv = function CrearDivs(){
        var ID = this.ID;
        var Capa = document.getElementById('espacioPrueva');
        var DivPrueva = document.createElement('div');
        DivPrueva.style.width = 200+'px';
        DivPrueva.style.height = 200+'px';
        DivPrueva.style.margin = '10px 10px';
        DivPrueva.style.background = 'hsla(120,100%,50%,1)';
        Capa.appendChild(DivPrueva);
      
		DivPrueva.addEventListener("mouseover", function (){
        document.getElementById('log').innerHTML ='ObjetoPrueva ' +ID;
        }, false);
	
	}
	
}

Albuss · #3 (**permalink**) 18/09/2013, 17:01

Muchas gracias Zerokilled, pero una pregunta, Pensaba que cuando creaba una nueva instancia del objeto, era este el que guardaba las variables de su prototipo, es decir, que dos objetos diferentes nunca se sobrescriben variables de sus prototipos ¿por que en javascript no funciona asi?

zerokilled · #4 (**permalink**) 19/09/2013, 07:13

debes tener claro diferenciar propiedades y variables en el contexto de un constructor. en adición, ahí no estás usando prototipo, al menos no como lo define el lenguaje. a diferencia de otros lenguajes, las variables definidas en javascript ‒sin importar su contexto‒ son siempre globales a no ser que explícitamente se declaren con var o que sean un argumento de la función. por ejemplo, en tu función pudistes usar directamente la variable id ‒de la función prototipo‒ en lugar crear un clon de esa variable. otra de las diferencias, las variables en los constructores no son explicitamente propiedades del objeto, aunque se le puede considerar propiedad privada siempre y cuando sea una variable local al constructor. en este sentido no se sobreescriben una a la otra.