Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Newbie 'this' within function question... help me!

Reply
Thread Tools

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

 
 
ed
Guest
Posts: n/a
 
      06-21-2007
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);
}

 
Reply With Quote
 
 
 
 
JsD
Guest
Posts: n/a
 
      06-21-2007
On Jun 21, 3:47 pm, ed <(E-Mail Removed)> 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

 
Reply With Quote
 
 
 
 
Pete
Guest
Posts: n/a
 
      06-22-2007
On Jun 22, 3:47 am, ed <(E-Mail Removed)> 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++ ?

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      06-22-2007
On Jun 22, 5:47 am, ed <(E-Mail Removed)> 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

 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      07-02-2007
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

 
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
Can a function be called within a function ? Peter Moscatt Python 4 04-18-2005 09:33 PM
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
pointing to a member function/method within another function uli C++ 3 05-13-2004 11:02 AM
adding attributes to a function, from within the function Fernando Rodriguez Python 6 11-03-2003 05:04 PM
generator function within a generator function doesn't execute? TheDustbustr Python 1 07-25-2003 10:45 AM



Advertisments