Newbie 'this' within function question... help me!

Discussion in 'Javascript' started by ed, Jun 21, 2007.

  1. ed

    ed Guest

    Hi, I've got the following (trivial) example, and I'm not quite sure
    how to get it to behave as I would like. When I click on the H1
    element, I want the "testa" method to be called, and for it to update
    number. But instead, "this" refers to the mousedown event...and the
    function does not update the number.

    How can I refer to "number" within the "testa" method?

    blah = {};
    blah.test = function() {
    this.number = 1;

    var headerone = document.getElementById("h1");
    utils.addEvent( headerone, 'click', this.testa );

    alert(this.number);
    }
    blah.testa = function( params ) {
    alert( params );
    this.number++;
    alert(this.number);
    }
     
    ed, Jun 21, 2007
    #1
    1. Advertising

  2. ed

    JsD Guest

    On Jun 21, 3:47 pm, ed <> wrote:
    > Hi, I've got the following (trivial) example, and I'm not quite sure
    > how to get it to behave as I would like. When I click on the H1
    > element, I want the "testa" method to be called, and for it to update
    > number. But instead, "this" refers to the mousedown event...and the
    > function does not update the number.
    >
    > How can I refer to "number" within the "testa" method?
    >
    > blah = {};
    > blah.test = function() {
    > this.number = 1;
    >
    > var headerone = document.getElementById("h1");
    > utils.addEvent( headerone, 'click', this.testa );
    >
    > alert(this.number);}
    >
    > blah.testa = function( params ) {
    > alert( params );
    > this.number++;
    > alert(this.number);
    >
    > }


    if blah is a singleton, just use blah.number=1. If it is not a
    singleton, call another method to set number. "this" is set to the
    event only in the event handler, subsequent method calls should have
    "this" point to the object.

    JsD
     
    JsD, Jun 22, 2007
    #2
    1. Advertising

  3. ed

    Pete Guest

    On Jun 22, 3:47 am, ed <> wrote:
    > Hi, I've got the following (trivial) example, and I'm not quite sure
    > how to get it to behave as I would like. When I click on the H1
    > element, I want the "testa" method to be called, and for it to update
    > number. But instead, "this" refers to the mousedown event...and the
    > function does not update the number.
    >
    > How can I refer to "number" within the "testa" method?
    >
    > blah = {};
    > blah.test = function() {
    > this.number = 1;
    >
    > var headerone = document.getElementById("h1");
    > utils.addEvent( headerone, 'click', this.testa );
    >
    > alert(this.number);}
    >
    > blah.testa = function( params ) {
    > alert( params );
    > this.number++;
    > alert(this.number);
    >
    >
    >
    > }- Hide quoted text -
    >
    > - Show quoted text -


    blah.test.number++ ?
     
    Pete, Jun 22, 2007
    #3
  4. ed

    RobG Guest

    On Jun 22, 5:47 am, ed <> wrote:
    > Hi, I've got the following (trivial) example, and I'm not quite sure
    > how to get it to behave as I would like. When I click on the H1
    > element, I want the "testa" method to be called, and for it to update
    > number. But instead, "this" refers to the mousedown event...and the
    > function does not update the number.


    Firstly, the value of a function's this keyword is set by the calling
    function when the function is called. It is not set by the function
    declaration or expression.

    Where does "number" belong? Should it be a property of blah? If so,
    make it a property of blah and use it.

    >
    > How can I refer to "number" within the "testa" method?


    To to that you need to create a closure that will be to a specific
    instance of the testa execution object.

    >
    > blah = {};
    > blah.test = function() {
    > this.number = 1;


    The this keyword (most probably) refers to the object that the
    function was called as a method of, or the window object. Since you
    don't show how the function is called, we have to guess as you can set
    to any object using various means, including using the Function
    object's call() and apply() methods.

    If you've called the function using blah.test(), then the this keyword
    is a reference to the blah object. this.number=1 will result in a
    number property being added to blah (if it doesn't already exist) and
    its value set to 1.

    > var headerone = document.getElementById("h1");
    > utils.addEvent( headerone, 'click', this.testa );


    You don't show the addEvent function, it may have an effect on what
    the value of the this keyword is set to. Assuming the Mozilla event
    model, the element with id=h1 now has an onclick handler whose value
    is a reference to the annonymous function referenced by blah.testa.

    When the function fires, the function is called and its this keywords
    is set as a reference to the DOM element that fired the event and the
    first parameter is set as a reference to the event object.

    >
    > alert(this.number);}


    Now you see the value of blah.number, which is 1.


    >
    > blah.testa = function( params ) {
    > alert( params );


    params is a reference to the event object.

    > this.number++;
    > alert(this.number);


    the event object doesn't have a number property, so you get
    'undefined'. I expected this.number++ to throw an error but it
    doesn't. One for Richard Cornford if he's lurking.

    If you explain what properties number is required to have, a strategy
    can be suggested. If you want each onclick to have its own instance
    of number, you'll need to use a closure, then pass a reference to your
    addEvent function so it can ensure it is passed to the testa function,
    e.g. (using closures for both number and testa):


    blah.test = function() {
    var number = 1;
    var fn = this.testa;
    var headerone = document.getElementById("h1");
    utils.addEvent( headerone, 'click', function(){
    fn(number);
    });
    }

    blah.testa = function( number ) {
    number++;
    alert(number); // shows 2 when h1 clicked on
    }


    If you need a reference to the event object, that can be
    accommodated. If number should be a property of blah, do that.


    --
    Rob
     
    RobG, Jun 22, 2007
    #4
  5. RobG wrote:
    <snip>
    >> this.number++;
    >> alert(this.number);

    >
    > the event object doesn't have a number property, so you get
    > 'undefined'. I expected this.number++ to throw an error but it
    > doesn't. One for Richard Cornford if he's lurking.

    <snip>

    No error would be expected. The sequence of post increment is to read
    the value of the object's property, increment that value and then write
    it back to the object's property, with the usual type-conversion along
    the way. The object has no - number - property so when the value is read
    the result is the undefined value. When that value is incremented the
    undefined value is type-converted to a number, giving NaN, and then
    incremented, where NaN + 1 == NaN. That value is then written back to
    the - number - property of the object, but as it has no - number -
    property such a property is created as a side effect of the act of
    writing it back.

    The process may be unuseful but it will not (never) error.

    Richard
     
    Richard Cornford, Jul 2, 2007
    #5
    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. uli
    Replies:
    3
    Views:
    528
  2. TheDustbustr
    Replies:
    1
    Views:
    474
    Sami Hangaslammi
    Jul 25, 2003
  3. Fernando Rodriguez
    Replies:
    6
    Views:
    322
    Michele Simionato
    Nov 3, 2003
  4. Elmo Watson
    Replies:
    1
    Views:
    606
    Eliyahu Goldin
    May 8, 2007
  5. Harlett O'Dowd

    function function question from a newbie

    Harlett O'Dowd, Oct 2, 2007, in forum: Javascript
    Replies:
    2
    Views:
    116
    Thomas 'PointedEars' Lahn
    Oct 3, 2007
Loading...

Share This Page