Crear objeto THIS

[salbatore]

Hola de nuevo a todos,

Al cargar mi web recorro un array con varios objetos seleccionados. El caso es que al recorrer los objetos ejecuto una funcion en la que me gustaria que el this de esta fuese el objeto que tengo en ese momento.

¿Como se crea el objeto this?... o solo puede ser con eventos... ?

Código Javascript:

for(var i in objetos)
    {
        function(){alert(this.className);}
    }
 

[IsaBelM]

this ni se crea ni se destruye. variable this y su scope. en el caso que te ocupa puede usar objetos[i]

[masterpuppet]

Te dejo una referencia a this, y para bindear debes utilizar call o apply, algo así:

Código Javascript:

for(var i in objetos)
{
    (function(){
        alert(this.className);
    }).call(objetos[i]);                
}
 

Saludos.

[IsaBelM]

pregunto. qué beneficios tiene usar el método call en lugar de una invocación con ()?

for(var i in objetos) {
    (function(){alert(objetos[i].className);})()           
}

[masterpuppet]

No es un tema de beneficio, deberías leer de nuevo la pregunta de salbatore, esta preguntando como hacer que this dentro de la funcion haga referencia al objecto actual del for, por eso el call.

[salbatore]

Muchas gracias!... ademas he aprendido un monton con estas respuestas!.

IsaBelM... yo necesito usar el this para no tener que cambiar todo el codigo de mis funciones. Lo que hago es invocar a estas funciones haciendome pasar por el this y asi que la funcion funcione cuando haga uso de este objeto.

Que gusto!.

[IsaBelM]

Iniciado por masterpuppet

esta preguntando como hacer que this dentro de la funcion haga referencia al objecto actual del for, por eso el call.

por eso mismo. si son textbox

(function(){alert(objetos[i]);})()* // objetos[i] = object HTMLInputElement

(function(){
alert(this);
}).call(objetos[i]);* *// this = object HTMLInputElement

[salbatore]

Hola IsaBelM...

No ves el beneficio?... en tu codigo me harias cambiar el this por objetos[i], lo que me haria cambiar todas mis funciones a mano.

Gracias de nuevo a los dos.

[masterpuppet]

salbatore se podria mejorar e implementar un bind como hacen las librerias(Mootools, Prototype, etc...), algo asi:

Código Javascript:

Function.prototype.bind = function(scope) 
{
    var _function = this;  
    return function() {
        return _function.apply(scope, arguments);
    }
}
 
//ej 1
var fn = function(){
    alert(this);
}.bind(objetos);
fn();
 
//ej 2
for(var i in objetos)
{
    (function(){
        alert(this.className);
    }.bind(objetos[i]))();
}
 

Saludos.

[salbatore]

Hola masterpuppet,

Estuve buscando info... y vi eso que comentas que lo hacen las librerias... la verdad es que nunca he usado una... asi que cuando dicen "libreria" "jquery"... salgo corriendo a toda leche.

Usare el codigo!... me ha servido de mucho tu ayuda.

Hasta pronto! :D

[IsaBelM]

Iniciado por salbatore

Hola IsaBelM...

No ves el beneficio?... en tu codigo me harias cambiar el this por objetos[i], lo que me haria cambiar todas mis funciones a mano.

Gracias de nuevo a los dos.

ok, no leí tu post anterior a este

Iniciado por salbatore

Estuve buscando info... y vi eso que comentas que lo hacen las librerias... la verdad es que nunca he usado una... asi que cuando dicen "libreria" "jquery"... salgo corriendo a toda leche.

tu no eres el único

[_cronos2]

Iniciado por masterpuppet

Código Javascript:

Function.prototype.bind = function(scope) 
{
    var _function = this;  
    return function() {
        return _function.apply(scope, arguments);
    }
}
 
//ej 1
var fn = function(){
    alert(this);
}.bind(objetos);
fn();
 
//ej 2
for(var i in objetos)
{
    (function(){
        alert(this.className);
    }.bind(objetos[i]))();
}
 

Eeeeeerm... ¿un poco de documentación por favor? XD

[zerokilled]

Iniciado por _cronos2

Eeeeeerm... ¿un poco de documentación por favor? XD

en realidad no es tan complicado. bind lo que hace es devolver una funcion donde enlaza otra funcion con un objeto en particular. no entiendo porque tanto rodeo cuando call y apply cumplen con esa expectativa. veamoslo parte por parte...

Código:

Function.prototype.bind = function(scope) {
...
}

bind es un metodo que se hereda en todas las funciones puesto que esta declarado en el prototipo de Function. el argumento scope es el objeto que se desea enlazar con otra funcion.

Código:

    var _function = this;

la variable _function retiene la referencia de la funcion a enlazar con el objeto. esta variable se crea para poder hacer un closure. recuerda que this siempre hace referencia a un objeto, al estar ubicado en el prototipo del objeto Function, this siempre obtiene como referencia la funcion desde el cual se invoca bind. es decir, en alert.bind(), this hace referencia a alert.

Código:

    return function() {
        return _function.apply(scope, arguments);
    }

una funcion anonima que se devuelve cuando se invoca bind. dentro de esa funcion anonima contiene lo siguiente.

Código:

        return _function.apply(scope, arguments);

aqui se utiliza la variable _function el cual es la referencia de this o lo mismo que la funcion a enlazar. en el ejemplo anterior, _function vendria siendo la funcion alert. entonces, desde dicha referencia se invoca el metodo apply pasando como argumento el objeto (scope) al cual se va aplicar la funcion mas posibles argumentos (arguments) cuando se invoca la funcion devuelta por bind.

en mi opinion, en muy pocos casos le veo utilidad y mas aun pudiera ser peligroso si el navegador no maneja bien el colector de basura (garbage collector) como es el caso de iexplorer. si yo tuviera que enlazar una funcion a un objeto, simplemente usaria directamente call o apply. usando el mismo ejemplo de @masterpuppet

Código:

// ejemplo con bind ;
var fn = function(){
    alert(this);
}.bind(objetos);
fn();

// ejemplo nativo ;
(function(){alert(this);}).call(objetos);

[buzu]

Código Javascript:

/*
  Aqui estas extendiendo el prototipo del Objeto Function
  y le estas agregando un método bind.
  Se pueden lograr patrones muy eficientes con este modelo
  pero no lo recomiendo a menos que sepas lo que haces.
*/
Function.prototype.bind = function(scope) 
{
    var _function = this;// aqui this hace referencia a la funcion en donde bind se ejecuta.
//por ejemplo, en ej1 this hace referencia a 
//function(){
//  alert(this);
//}
    return function() { //una vez que se llame a bind, se ejecuta el codigo y
//la funcion original es reemplazada por esta funcion
//Esta funcion simplemente toma la copia de la funcion original que guardo
//hace algunas lineas y la llama con apply para poder cambiar el
//contexto en el que se ejecuta, o como algunos dirian, para cambiar el
//valor de this.
        return _function.apply(scope, arguments);
    }
}
 
//Lo que sige son los ejemplos, no tienen mucho de especial ya que el 
//codigo ha sido explicado anteriormente
//pero ejemplo 2 tiene otra cosa interesante.
//ej 1
var fn = function(){
    alert(this);
}.bind(objetos);
fn();
 
//ej 2
//En este ejemplo vemos que se usa una funcion anonima autoejecutable para
//poder ejecutar el bind. Este tiene la particulariedad que una vez que la funcion 
//anonima regresa, muere y no deja huella en el ambito global. Lo mas probable 
//es que sea victima de garbage collector.
for(var i in objetos)
{
    (function(){//esta es la funcion anonima auto-ejecutable.
        alert(this.className);
    }.bind(objetos[i]))();
}
 

[buzu]

Ouch, con razón el dolor de cabeza. He chocado.

[zerokilled]

no te preocupes, eso nos pasa a todos. y mas fuerte el dolor de cabeza cuando le pones tanto esfuerzo. de todos modos, siempre me gusta leer las interpretaciones de los demas. saludos hombre!

[buzu]

Bueno, ahora que lo pienso, esto:

Código Javascript:

for(var i in objetos){
        function(){alert(this.className);}
}
 

Tiene muy poco sentido. Cual es la idea al recorrer una lista de objeto y crear una función anónima que no puede ser llamada? Es ese tu código real o solo querías representar tu problema, porque si es tu código real, entonces debe haber algo muy grave ahí.

[buzu]

Zerokilled, tambien me ha gusta leer las interpretaciones de los demas. Especialmente en estos temas, se puede aprender algo nuevo. :D

[_cronos2]

Muchas gracias a los dos, voy entendiendo un poco más esto XD

[masterpuppet]

Iniciado por _cronos2

Eeeeeerm... ¿un poco de documentación por favor? XD

Que tal _cronos2, deberías comprender el porque, la idea es poder aplicar el scope a una función en la definición de la misma y no en la ejecución(este es el caso de call & apply), se suele usar para cambiar el scope de los callbacks, un ejemplo seria tu funcion addEvent, sino recuerdo mal la signatura era:

Código Javascript:

addEvent(event, fn, element)
 

dentro de fn this siempre hace referencia a element, bueno con bind es algo simple cambiar el scope

Código Javascript:

var obj = {
   name: 'Ninja'
   action: function(){
       console.log(this.name);
   }
}
addEvent(event, function(){
    this.action();
}.bind(obj), element)
 

Lo que hay que tener en cuenta es el overhead, se ejecutan dos funciones en lugar de una.

Saludos.

[_cronos2]

Ok muchas gracias, creo que ahora ya lo entendí del todo. Pero entonces, ¿qué es lo que hacen apply y call?
Gracias otra vez (:
PD: ¿Será que esto es complicado, o que yo soy muy torpe? XD

[zerokilled]

bind, apply y call hacen casi lo mismo, enlazar un objeto con una funcion. lo que los diferencia es que bind devuelve una funcion para mas tarde ser invocada. en cambio, call y apply enlaza y procesa la funcion en ese preciso momento.

[IsaBelM]

como se ha mencionado el modelo avanzado (addEvent) para registrar eventos, ya aprovecho para preguntar como evitar el problema de memoria que tiene ie cuando se registran x eventos ya que este los almacena

gracias

[Panino5001]

Isabel, el problema de memoria al que hacés referencia ocurría en Explorer 6. No estoy seguro que ocurra en las versiones siguientes. No obstante, lo que se hace para evitarlo es agregar una función al evento onunload que desatache todos los eventos asignados.
Un ejemplo:

Código PHP:

  var panino=(function(){
/* ---- métodos privados ---- */
    var metodosPrivados={
        addEvent: function(type, fn ) {
            if ( this.addEventListener ) {
                this.addEventListener( type, fn, false );
            } else if(this.attachEvent){
                var _this=this;
                var f= function(){fn.call(_this,window.event);}
                this.attachEvent( 'on'+type, f);
                this[fn.toString()+type]=f;
            }else{
                this['on'+type]=fn;
            }
            var ev={_obj:this,_evType:type,_fn:fn};
            window.EvRegister=window.EvRegister || [];
            window.EvRegister.push(ev);
            return this;
        },
        removeEvent: function(type, fn ) {
            if( this.removeEventListener){
                this.removeEventListener( type, fn, false );
            }
            else if(this.detachEvent){
                this.detachEvent('on'+type,this[fn.toString()+type]);
                this[fn.toString()+type]=null;
            }
            else{
                  this['on'+type]=function(){};
            }
            for (var ii= 0, l=window.EvRegister.length; ii < l ; ii++) {
                if (window.EvRegister[ii]._evType== type && window.EvRegister[ii]._obj==this && window.EvRegister[ii]._fn==fn) {
                    window.EvRegister.splice(ii, 1);
                    break;
                    
                }
            } 
            return this;
            },
        extendido:true
         
    }
/* ---- métodos públicos ---- */
    return{
        extend:function(el,obj){
            if(el.extendido && el!=metodosPrivados)return el;
            for(var i in obj)
                el[i]=obj[i];
            return el;
        },
        get:function(id){
            if(!document.getElementById(id))return false;
            return panino.extend(document.getElementById(id),metodosPrivados);
        },
        getO:function(obj){
            return panino.extend(obj,metodosPrivados);
        },
        add:function(obj){
            panino.extend(metodosPrivados,obj);
        },
        unregisterAllEvents:function(){
            if(window.EvRegister)
            while (window.EvRegister.length > 0) {
                   panino.getO(window.EvRegister[0]._obj).removeEvent(window.EvRegister[0]._evType,window.EvRegister[0]._fn);
            }
            window.EvRegister=null;
            for(var i=0;el=document.getElementsByTagName('*')[i];i++)
                if(el.extendido)
                    for(var ii in metodosPrivados)
                        el[ii]=null;
            panino=null;
        }
    }    
})();
var $=panino.get;
panino.getO(window).addEvent('unload',panino.unregisterAllEvents); 
   

Fijate cómo por cada evento asignado se guarda un objeto en la variable EvRegister y luego se utilizan esos objetos para remover los eventos durante el evento unload.

[zerokilled]

@isabelm; si interesas, en el siguiente enlace puedes leer un articulo de los diferentes patrones que producen derrame de memoria en iexplorer. a mi juicio, bastante bueno. http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

[salbatore]

Buenas buzu...

Todo el problema viene al querer hacer un evento "onload" al cargar la web controlado. El caso es que del mismo modo que adjudico los eventos click y demas... necesitaba que lo hacerlo tambien con los load... el problema es que no solo lo queria para objetos... lo queria para ejecutar funciones de un array... solo que tengo otro array onload donde busca objetos por clases y si coincide alguna clase selecciona el objeto y ejecuta las funciones para ese objeto. El caso es que necesitaba que el this para no cambiar toda la funcion... no todas.. pero si muchas.

Bueno... muchas gracias por vuestra ayuda!... he aprendido mucho.

EDITO: que gusto de onload!... lo veo y se me cae la baba

[IsaBelM]

gracias a ambos por vuestras respuestas.
Panino dice que en versiones posteriores a la 6 puede que no ocurra y por otro lado el articulo al que zerokilled me redirecciona, está fechado en junio del 2005.
eso quiere decir que, al menos en closures, ya no existe ese problema?? y en los demás patrones??

[buzu]

Bueno, yo perdí de vista este hilo y ahora no se ni como está la onda. A ver si no meto la pata.

Isabel, el problema del derrame de memoria es un problema de IE6, lo que sucede es que IE6 no libera la memoria hasta que se hace manualmente, que es lo que hace la función del gran panino (holo amigo)* Creo, pero puedo equivocarme, que tiene que ver con garbage collection. IE6 es una pesadilla y tiene más bugs que features (Como se dice en español? U_U!) De cualquier modo, no creo que tenga mucho que ver con closures ni con algún otro patrón.

*No es error de dedo, solo que me gusta holo desde que vi Megamind.

[IsaBelM]

hola, buzu
no has metido la pata, has respondido a mi duda