Issue with function in prototype class

This site is best viewed in a modern browser with JavaScript enabled.

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

Mulone;1062406 wrote:
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

toicontien;1062430 wrote:
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= ...