how to get my javascript class?

olaalo

Hi,
being quite new to javascript I'm scratching my head to the following issue, hope someone can help me...

I'm having a javascript "class" that looks like follows (just showing relevant parts)

Expand|Select|Wrap|Line Numbers

 function PlayControl (x) {

   this.x = x;

}
 
PlayControl.prototype.show = function() {

   trace(this.x); 

   setInterval (this.hide, 2000);

}
 
PlayControl.prototype.hide = function() {

   trace(this.x); 

}

If I use this class like:

Expand|Select|Wrap|Line Numbers

 var control = new PlayControl(5);

control.show();

the first trace prints "5" but the second trace (that is displayed after 2s) prints "undefined". Somehow, when the timer event invokes the hide function, "this" isn't the PlayControl object any more. My guess is that "this" represents the event target in this case, but how do I get to my PlayControl object in this scenario?

Thanks for any help!
/o

btw, I test this in Opera.

Dormilich

setInterval() (along with some other methods*) alter the scope of this in the called function. in this case the first time this (in trace(this.x)) refers to control, the second time to window.

* most methods of window and every event handler

olaalo

yes, that's what I suspected. But in the second case (in the hide method), how do I access the control object?
Thanks.

Dormilich

Quote:

Originally Posted by olaalo

But in the second case (in the hide method), how do I access the control object?

you can’t because the object control does not exist here (it’s a variable name!). nevertheless you can manually set this by the call() function.

Expand|Select|Wrap|Line Numbers

setInterval.call(this, this.hide, 2000);

olaalo

hmm, setInterval.call(null, this.hide, 2000) works fine (but I still get the window object in the hide function of course). setInterval.call(this, this.hide, 2000) doesn't get the hide function invoked at all...

Dormilich

until I find a better solution you can use a closure.

Expand|Select|Wrap|Line Numbers

 PlayControl.prototype.show = function() {

   console.log(this.x);

   var that = this;

   var fn = function() { that.hide(); }

   setInterval(fn, 2000);

}

olaalo

That works just fine! Thanks a lot!!

Dormilich

Quote:

Originally Posted by olaalo

That works just fine!

I know, I made it work *gg* ;)

olaalo

Hi again,
I've now got a related question (which clearly shows I haven't really understood how JS really works...) Anyway, the following code works fine:

Expand|Select|Wrap|Line Numbers

 function PlayControl (x)  {   

 this.x = x;

 var c = document.getElementById('control');

 c.addEventListener("mousemove", this._dragSettingsDialog, false);

}
 
PlaybackControl.prototype._dragSettingsDialog = function(evt)

{

  //do something

}

I now would like (again) to access the PlayControl's private properties from the _dragSettingsDialog method. To do this I thought I should pass the PlayControl object as a parameter to the method, like:

Expand|Select|Wrap|Line Numbers

 PlaybackControl.prototype._dragSettingsDialog = function(evt, controlObject)

{

  controlObject.x;

}

Is this the best way to do it? If so, what should the addEventListener method look like? I've tried things like c.addEventListener("mousemove", function (e) { this._dragSettingsDialog(e, this); }, false); without any luck.
Hope you can help me with this too.

Dormilich

first, in Javascript there are no private properties (although you can mimic something similar)

addEventListener() is similar to setInterval() as it changes the scope of this to the element it is attached to. if you want to use this in the scope of your class, just do what you have done with setInterval()—use a closure.

to better understand these problems, read about Scope and Inheritance, as these are crucial to further understand Javascript.

olaalo

Thanks for the pointer, I sure will read up on this (and yes, I'm just mimic private scoping here, or actually just trying to not pollute the global namespace with a bunch of properties).

I actually tried to use a closure like:

Expand|Select|Wrap|Line Numbers

 var that = this; 

c.addEventListener("mousemove", that._dragSettingsDialog, false);

but that doesn't make any difference at all, does the syntax need to be different?

Dormilich

Quote:

Originally Posted by olaalo

I'm just mimic private scoping here, or actually just trying to not pollute the global namespace with a bunch of properties.

private properties and ‘not polluting the global namespace’ are two very different things.

Quote:

Originally Posted by olaalo

I actually tried to use a closure like […]

that’s not a closure.

check out the references in this article

olaalo

thanks for the link,
I'll look into this and hopefully I'll figure out how to make this work.

Dormilich

unfortunately it’s not a piece of cake (when I think how long it took me to understand it), best is to try and code as much as possible.

how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

re: how to get my javascript class?

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about