Question about function objects vs object literals?

Discussion in 'Javascript' started by Oltmans, Jun 30, 2008.

  1. Oltmans

    Oltmans Guest

    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
     
    Oltmans, Jun 30, 2008
    #1
    1. Advertising

  2. On Jun 30, 11:16 am, Oltmans <> 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
     
    Peter Michaux, Jun 30, 2008
    #2
    1. Advertising

  3. Oltmans

    RoLo Guest

    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
     
    RoLo, Jun 30, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Goche
    Replies:
    8
    Views:
    16,519
  2. Richard Hayden

    Comparing objects to built-in literals

    Richard Hayden, Mar 11, 2005, in forum: Python
    Replies:
    1
    Views:
    301
  3. Replies:
    6
    Views:
    438
    Michael Mair
    Jan 26, 2005
  4. 7stud
    Replies:
    11
    Views:
    717
    Dennis Lee Bieber
    Mar 20, 2007
  5. SasQ

    Are literals objects?

    SasQ, Apr 6, 2007, in forum: C++
    Replies:
    27
    Views:
    794
    James Kanze
    Apr 7, 2007
Loading...

Share This Page