Question about function objects vs object literals?

**Peter Michaux** · Jun 30 '08, 07:15 PM

Re: Question about function objects vs object literals?

On Jun 30, 11:16 am, Oltmans <rolf.oltm...@g mail.comwrote:

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:
---------

Code:

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)

Code:

$(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.

Code:

$(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
--------

Code:

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:
---------

Code:

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...