Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Question about function objects vs object literals?

Reply
Thread Tools

Question about function objects vs object literals?

 
 
Oltmans
Guest
Posts: n/a
 
      06-30-2008

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
 
Reply With Quote
 
 
 
 
Peter Michaux
Guest
Posts: n/a
 
      06-30-2008
On Jun 30, 11:16 am, Oltmans <(E-Mail Removed)> wrote:
> 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
 
Reply With Quote
 
 
 
 
RoLo
Guest
Posts: n/a
 
      06-30-2008
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
class objects, method objects, function objects 7stud Python 11 03-20-2007 06:05 PM
function Object,function statement,function operator alex Javascript 3 12-28-2006 02:57 PM
Object creation - Do we really need to create a parent for a derieved object - can't the base object just point to an already created base object jon wayne C++ 9 09-22-2005 02:06 AM
write a function such that when ever i call this function in some other function .it should give me tha data type and value of calling function parameter komal C++ 6 01-25-2005 11:13 AM
Passing a C++ object's member function to a C function expecing a function pointer! James Vanns C++ 7 01-21-2004 02:39 AM



Advertisments