Question about function objects vs object literals?

[Oltmans]

Hi all,

I'm stuck in a situation where I need help. Any help will be highly
appreciated. I've created an object, after creating the object, I'm
assigning one of its functions to an event handler i.e. to onBlur
event of Text-area. Problem is that when I try to access object
properties from the handler function, I cannot access them in some
cases and get a value of undefined. Here is the sample code that I'm
trying

METHOD A:
---------
function TestObj(src, dest){

this.src = src;
this.dest= dest;
this.count = 500;
}

TestObj.prototype.display=function(){

//following displays 'undefined'
alert("Source ="+this.src+", Destination ="+this.dest);
//following also displays 'undefined'
alert('Count ='+this.count);
}

and here is how I'm using the above (using JQuery)

$(document).read(function(){
var t=new TestObj(50,100);
$("#tarea1").blur(t.display);
});

But when I do the following using Object literal , things seem to work
OK

METHOD B
--------

var TestObj={

display:function(src,dest){

return function(){
alert("Source ="+this.src+", Destination ="+this.dest);
}

}
};

$(document).read(function(){
//This works and I see values of 50 & 100 in the alert box
$("#tarea1").blur(TestObj.display(50,100));
});

Amazingly following also works

METHOD C:
---------
function TestObj(){

}

TestObj.prototype.display=function(src,dest){

return function(){
alert("Source ="+this.src+", Destination ="+this.dest);
}

}

and here is how I'm using the above (using JQuery)

$(document).read(function(){

var t=new TestObj();

$("#tarea1").blur(t.display(5,10));

});


Actually, I want to go with the Function object approach mentioned
under METHOD C, but I'm also trying to avoid the closure in " display
" function as I've read on Internet that it can cause memory leaks in
IE6. Any ideas on how to make METHOD C work while avoiding a closure.

Also, if you can give a reason as to why METHOD A isn't working that
will be highly appreciated.
Thanks in advance.

Regards,
Oltmans

 

[Peter Michaux]

Hi all,

I'm stuck in a situation where I need help. Any help will be highly
appreciated. I've created an object, after creating the object, I'm
assigning one of its functions to an event handler i.e. to onBlur
event of Text-area. Problem is that when I try to access object
properties from the handler function, I cannot access them in some
cases and get a value of undefined. Here is the sample code that I'm
trying

METHOD A:
---------
function TestObj(src, dest){

this.src = src;
this.dest= dest;
this.count = 500;

}

TestObj.prototype.display=function(){

//following displays 'undefined'
alert("Source ="+this.src+", Destination ="+this.dest);
//following also displays 'undefined'
alert('Count ='+this.count);

}

and here is how I'm using the above (using JQuery)

$(document).read(function(){
var t=new TestObj(50,100);
$("#tarea1").blur(t.display);
});

I'm not a jQuery user but my guess is that "this" is not being set
properly when the "display" function is called. I'd guess that jQuery
set's "this" to be the DOM element that has blurred when the event
fires. You want "this" to be the "t" object. Perhaps try the
following.

$(document).read(function() {
var t=new TestObj(50,100);
$("#tarea1").blur(function() {t.display();});
});

But when I do the following using Object literal , things seem to work
OK

METHOD B
--------

var TestObj={

display:function(src,dest){

return function(){
alert("Source ="+this.src+", Destination ="+this.dest);
}

}
};

$(document).read(function(){
//This works and I see values of 50 & 100 in the alert box
$("#tarea1").blur(TestObj.display(50,100));

});

I wouldn't have thought that the above would work. do you have "src"
and "dest" attributes set on the tarea1 element or global variables
also?

Amazingly following also works

METHOD C:
---------
function TestObj(){

}

TestObj.prototype.display=function(src,dest){

return function(){
alert("Source ="+this.src+", Destination ="+this.dest);
}

}

and here is how I'm using the above (using JQuery)

$(document).read(function(){

var t=new TestObj();

$("#tarea1").blur(t.display(5,10));

});

Again something seems odd here. There is never any setting of the
this.src and this.dest properties so how do they print properly?

Actually, I want to go with the Function object approach mentioned
under METHOD C, but I'm also trying to avoid the closure in " display
" function as I've read on Internet that it can cause memory leaks in
IE6.

I imagine that jQuery has other workarounds for the IE memory leak
issues. Most event libraries do some clean up when the page unloads
and provide an API for "cleaning" elements of all their event
handlers.

Any ideas on how to make METHOD C work while avoiding a closure.

When registering event handler functions there is almost always
closures involved somewhere so the event handler function either knows
the correct "this" value or has access to other values it needs. The
problem with memory leaks is if the event handler function has a
reference to the DOM element the function observes. It doesn't look
like you have that problem in Method C.

How I might write this...

var handlerGenerator = function(src, dest) {
return function() {
alert("Source =" + src + ", Destination =" + dest);
};
};

$(document).read(function(){
$("#tarea1").blur(handlerGenerator(5,10));
});


Peter

 

[RoLo]

var t=new TestObj(50,100);
$("#tarea1").blur(t.display); <-- here your passing the function, no
way jQuery knows about 't' object

What you want to do is,
$("#tarea1").blur(function(){t.display();});

This is not jQuery fault, this is how JS works.


or you could do something like:

function TestObj(src, dest){
var me=this; // save what 'this' is pointing to, so you can use it
on a closure
me.src = src;
me.dest= dest;
me.count = 500;

me.display=function(){
//following displays 'undefined'
alert("Source ="+me.src+", Destination ="+me.dest);
//following also displays 'undefined'
alert('Count ='+me.count);
};
};

var t=new TestObj(50,100);
$("#tarea1").blur(t.display);// <-- should work now, here me!=this
but me==t