Issue with function in prototype class

[Mulone]

Hi all,
I'm trying to build a class this way:

function MouseLogger() {
	this.fps = 2;
	this.state = 0; //0 = stop, 1 = play, 2 = record
	// recorded coordinates
	this.eventsQueue = new Array(); 
        ...
}

I defined a function:

MouseLogger.prototype.init = function() {
	log.debug("MouseLogger init");
	this.startRecord();
}

which works when I call "this.init();" anywhere in the class.

I did the same thing defining:

MouseLogger.prototype.addGuiEvent = function(e) {
	if (e){
		this.eventsQueue.push(e);
		//log.debug("queue size: ",this.eventsQueue.size());
	} else {
		log.error("addEvent null");
	}
}

But when I call "this.addGuiEvent(e);" my Firefox says:

Error: this.addGuiEvent is not a function

I can't see anything wrong with it. Any hints?

Thanks!
Mulone

[jeanluca]

I think I know what your problem is, and if thats it, you're not showing us enough code, so I'm guessing here.

So, you probably do something like:

var obj = new MouseLogger() ;
obj.addGuiEvent() ; 
MouseLogger.prototype.addGuiEvent = function(e) { ... }

right. Which doesn't work, but if you change it too:

MouseLogger.prototype.addGuiEvent = function(e) { ... }
var obj = new MouseLogger() ;
obj.addGuiEvent() ;

it works!
You have to make sure that the 'addGuiEvent' is defined at the moment you want to use it

cheers

[Mulone]

Thanks for your answer!
Actually I'm calling this function from another function:

MouseLogger.prototype.addGuiEvent = function(e) {
	if (e){
		this.eventsQueue.push(e);
		//log.debug("queue size: ",this.eventsQueue.size());
	} else {
		log.error("addEvent null");
	}
}

/**
* fetch coordinates from current mouse event
*/
MouseLogger.prototype.grabEvents = function(e) {
   if (!e) e = window.event;
   if (!e) log.error("grabCoordinates null event",e);
   
   if (e.pageX || e.pageY)
   {
       this.posx = e.pageX;
       this.posy = e.pageY;
   }
   else if (e.clientX || e.clientY){
       this.posx = e.clientX + document.body.scrollLeft;
       this.posy = e.clientY + document.body.scrollTop;
   }
   //log.debug("grabCoordinates",this.posx,this.posy)
   if (!this.posx || !this.posy){
	   log.warn("grabCoordinates null coords");
       this.posx = null;
       this.posy = null;
   }
   log.error(this);
   this.addGuiEvent(e);
}

The function grabEvents is called here:

/**
* start recording
*/
MouseLogger.prototype.startRecord = function() {
  
   log.debug("MouseLogger startRecord");
   this.state = 1
   window.onmousemove = this.grabEvents;
}

I'm wandering if the onmousemove is related to this issue... Maybe the scope of "this" is different in this case.
Any hints?

[rnd me]

events have a different this than OOP methods.
use "that" instead:

*/
MouseLogger.prototype.grabEvents = function me(e) {
  var that=me.that;
   if (!e) e = window.event;
   if (!e) log.error("grabCoordinates null event",e);
   
   if (e.pageX || e.pageY)
   {
       that.posx = e.pageX;
       that.posy = e.pageY;
   }
   else if (e.clientX || e.clientY){
       that.posx = e.clientX + document.body.scrollLeft;
       that.posy = e.clientY + document.body.scrollTop;
   }
   //log.debug("grabCoordinates",this.posx,this.posy)
   if (!that.posx || !that.posy){
	   log.warn("grabCoordinates null coords");
       that.posx = null;
       that.posy = null;
   }
   log.error(that);
   that.addGuiEvent(e);
}


MouseLogger.prototype.startRecord = function() {
   MouseLogger.prototype.grabEvents.that=this;
   log.debug("MouseLogger startRecord");
   this.state = 1
   window.onmousemove = this.grabEvents;
}

[Mulone]

Thanks for your answer!
Actually the "that" solution seems a bit akward... What's the proper way of handling this?
I wanted to create a class containing all the logic I need, but maybe in JS I don't really need that.

Mulone

[rnd me]

Thanks for your answer!
Actually the "that" solution seems a bit akward... What's the proper way of handling this?
I wanted to create a class containing all the logic I need, but maybe in JS I don't really need that.

Mulone

there isn't a perfect way. there is only one word, "this", that javascript uses for OOP and events; you have to dupe/shadow one of them when both are needed.


you can use closure to cleanup the interface and avoid the extra that property, at a slight cost to speed:

MouseLogger.prototype.grabEvents = (function(){
  var that=this;
   return function(e) {
   if (!e) e = window.event;
   if (!e) log.error("grabCoordinates null event",e);
   
   if (e.pageX || e.pageY)
   {
       that.posx = e.pageX;
       that.posy = e.pageY;
   }
   else if (e.clientX || e.clientY){
       that.posx = e.clientX + document.body.scrollLeft;
       that.posy = e.clientY + document.body.scrollTop;
   }
   //log.debug("grabCoordinates",this.posx,this.posy)
   if (!that.posx || !that.posy){
	   log.warn("grabCoordinates null coords");
       that.posx = null;
       that.posy = null;
   }
   log.error(that);
   that.addGuiEvent(e);
}
}());//end scope wrapper

[toicontien]

If you want, you can wrap up the function closure solution into something reusable:

function getFunctionInContext( context, fn ) {
	return function() {
		return fn.apply( context, arguments );
	};
}

Then to use:

window.onmousemove = getFunctionInContext( this, this.grabEvents );

Then the "this" keyword inside grabEvents will point to the instance of the MouseLogger class instead of the window object.

[Kor]

window.onmousemove = getFunctionInContext( this, this.grabEvents );

I used to think that window object supports only few events (onload, onblur, onfocus, onerror, onunload and onbeforeunload [non standard]). I would say that onmousemove should be attached to the document object

document.onmousemove= ...