Scope (closure?) question

[Kidogg]

Hi all,
First let me apologize for being an idiot when it comes to Javascript,
I've only recently had to do any serious work in it - and I'm properly
stuck already!

Essentially I'm trying to bind a click event (using MooTools) to a
<div>, but inside the event handler have access to an object (of my
own creation) that "owns" the <div>. So essentially something like the
following (syntax is probably wrong - I'm away from my dev machine):

function MyObject(objid,parent)
{
this.parent = $(parent);
this.divhandle = new Element('div');
this.divhandle.injectInside(this.parent);
this.objid = objid;

this.divhandle.addEvent('click', this._handleClick);
}

MyObject.prototype._handleclick = function(ev)
{
var e = new Event(e);

// how can i get a reference to the "MyObject" instance here?
// this.? doesnt seem to be valid & e.target just references the
<div>
}

Any help / comments appreciated,

Thanks,
Kieran

 

[RobG]

Hi all,
First let me apologize for being an idiot when it comes to Javascript,
I've only recently had to do any serious work in it - and I'm properly
stuck already!

Essentially I'm trying to bind a click event (using MooTools) to a

This is a general javascript news group, not a MooTools group. I'd
suggest you start with the MooTools forum:

<div>, but inside the event handler have access to an object (of my
own creation) that "owns" the <div>. So essentially something like the
following (syntax is probably wrong - I'm away from my dev machine):

function MyObject(objid,parent)
{
this.parent = $(parent);
this.divhandle = new Element('div');
this.divhandle.injectInside(this.parent);
this.objid = objid;

this.divhandle.addEvent('click', this._handleClick);

}

MyObject.prototype._handleclick = function(ev)
{
var e = new Event(e);

// how can i get a reference to the "MyObject" instance here?
// this.? doesnt seem to be valid & e.target just references the
<div>

Without knowing how _handleclick is called, it's impossible to say.
The value of a function's this keyword is set by the calling function,
not by the declaration. Presumably somewhere you are doing:

var anObj = new MyObject(...);

If _handleclick is called as a method of anObj, then its this will
refer to anObj. However, if it is called some other way, it likely
will not.

It seems that you are attaching _handleClick to the DOM object, so it
is very likely that its this keyword is a reference to that (though I
have no idea how MooTool's addEvent function works, other libraries
use call or apply to ensure it does).

 

[Kieran]

This is a general javascript news group, not a MooTools group. I'd
suggest you start with the MooTools forum:

<URL:http://forum.mootools.net/>







Without knowing how _handleclick is called, it's impossible to say.
The value of a function's this keyword is set by the calling function,
not by the declaration. Presumably somewhere you are doing:

var anObj = new MyObject(...);

If _handleclick is called as a method of anObj, then its this will
refer to anObj. However, if it is called some other way, it likely
will not.

It seems that you are attaching _handleClick to the DOM object, so it
is very likely that its this keyword is a reference to that (though I
have no idea how MooTool's addEvent function works, other libraries
use call or apply to ensure it does).

Sorry, I thought that I was asking a generalistic JavaScript question!

From your pointer to the "call" function I managed to come up with

something similar to this:

function MyObject(objid,parent)
{
this.parent = $(parent);
this.divhandle = new Element('div');
this.divhandle.injectInside(this.parent);
this.objid = objid;

this.divhandle.addEvent('click',
this._handleClick.bindWithEvent(this));
}

MyObject.prototype._handleclick = function(ev)
{
var e = new Event(e);
alert(this.objid);
}

So thanks very much for your help in that regard!