Topic awaiting preservation: OO-style event-based "this" question (Page 1 of 1)

A few months ago I posted a question about referring back to an OO-style JS object from an event handler using a private variable - at the time I wasn't sure if it could be done without referencing said object from a "global" scope. However, a coworker showed me this theory.. I'm not sure I understand the theory behind it, but it works.

function Something() { // prototype
var self = this; // reference to this object (declared privately, right?)
this.someProperty = 1;

this.onMouseOver = function() {
// This code runs within the context of the img (?)
alert('this.src: '+this.src);
// But "self" is a valid reference back to the object (??)
alert('self.someProperty: '+self.someProperty);
}

this.o = document.createElement('img');
this.o.src = 'image/someimage.gif';
this.o.onmouseover = this.onMouseOver;
document.body.appendChild(this.o);
}

var blah = new Something();

I would assume somehow "self" remains declared and accessible within the scope of the image onmouseover event handler, despite the fact that "this" in the context of said handler function refers to the image and not the object? - I'm not sure if that made any sense.

How I seem to see it is, "this" in the context of the mouseover event handler refers to the image because you are within an image object when the handler fires. However, because the image object is "nested" under the Something() object, the variable "self" is declared and available within that context!?

Can anyone explain the theory behind this, and if I'm right or completely off-track?? - I don't get it and it's bothering me!


[This message has been edited by Scott (edited 04-05-2003).]

You're right that the "this" keyword is a reference to the image for which the event is called. However, the "self" variable will be out of scope when it's called, I think. Since it's a variable, even if it is in scope, it'll change values every time you create a new Something object.

Instead of doing that, do something like

this.o.something = this;

then, within the event handler, you can use

this.something

to refer to the object that created the image.

BTW, you seem to have the meaning of "prototype" confused.

Slime,

I thought under JS, "prototype" refers to the "template" used when creating an object. Is something like "Asdf = function() {} .." called a class definition if it's to be used to create an object, or is it a constructor, or ? (I started with C++ and am familiar with the latter).

The strange part is that code works as-is (if you create the objects after window.onload() that is) - and "self" will refer to each individual object. It is very strange! .. I understand making references back to the object from the image, but I think ideally you shouldn't have to if you know what I mean. (?)

Oh, right, that *would* make sense that the self variable works that way. The reason is that you're creating a separate onMouseOver function for each Something you create.

What you have there (function Something(){...}) is a constructor. A prototype is a property of the constructor, and when you assign something to it, it's like simultaneously assigning that to every instance of it. So you could do:

Something.prototype.onMouseOver = function(){...}

so that the onMouseOver function of all Something's refers to the same function. This will save memory, but the approach you're using with the Self variable won't work.

Damn, how come Opera's back-button doesn't work?! Well, I'll just try again:

I understand it can be confusing using an oo-object in conjunction with a HTML-element. The "Something"-object is a wrapper. As you probably already understand, the constructor of "Something" does not only create itself, but also creates and initializes the image-element. Never seen this approach before, but I like it, actually. Through "Something" you can reference and control the image-element. This way you can easily add extra functionality, which you're doing through events.

BTW: sorry if this post is a big *duh* .

By the way, declaring

this.onMouseOver = function() {...}

and then

this.o.onmouseover = this.onMouseOver;

could simply be

this.o.onmouseover = function() {...}

Thanks for the insight.

Yeah, I've been getting into the habit of creating object constructors lately for a project I'm working on. (Which requires creation of multiple objects with event handling etc in some cases). Using OO-style makes it far easier, when done properly.

For the Arkanoid ( http://www.schillmania.com/arkanoid/arkanoid.html ) project I last did, I used similar syntax but the event handling was along the lines of 'onmouseover=function() {object.doSomething(this)}, that sort of thing - not as clean as I'd like.

Thanks again for the info, glad to see there are people who are as hooked (perhaps more, disturbing a thought as that may be) as I am on this stuff



[This message has been edited by Scott (edited 04-07-2003).]