Q on constructors and OOP in js

[ivanhoe]

I've got constructor like this(just short example):

function Item() {
this.elem = document.body.appendChild(document.createElement('div'));
this.elem.onmouseover = this.mOver;
...
return this;
}

and mouse over method is something like:

Item.prototype.mOver = function() {
this.className='something';
}

now my question is about using 'this' inside function above...Am I
right that it is acctually 'this' reference from onmouseover, thus
referencing div element, not instance of Item class? How could I then
access the instance of Item class , from within mOver method?


It would be perfect if I could have only one object, the div element,
and then I could easily add methods and properties, and there would be
only one 'this' to work with....I know how to do it with 'regular' js,
but how to put that in OO form, so that I can create a new instance
with: new Item() ??


thanx,
ivan

 

[Martin Honnen]

I've got constructor like this(just short example):

function Item() {
this.elem = document.body.appendChild(document.createElement('div'));
this.elem.onmouseover = this.mOver;
...
return this;
}

and mouse over method is something like:

Item.prototype.mOver = function() {
this.className='something';
}

now my question is about using 'this' inside function above...Am I
right that it is acctually 'this' reference from onmouseover, thus
referencing div element, not instance of Item class? How could I then
access the instance of Item class , from within mOver method?

You could set
this.elem.item = this;
in the Item constructor and then access
this.item
in the onmouseever event handler.

 

[Thomas 'PointedEars' Lahn]

I've got constructor like this(just short example):

function Item() {
this.elem = document.body.appendChild(document.createElement('div'));

You have tested the features before, have you not?

this.elem.onmouseover = this.mOver;
...
return this;

A constructor should not return anything.

}

and mouse over method is something like:

Item.prototype.mOver = function() {
this.className='something';
}

now my question is about using 'this' inside function above...Am I
right that it is acctually 'this' reference from onmouseover, thus
referencing div element, not instance of Item class?

`Item' is a prototype, not a class. ECMAScript < 4, JavaScript < 2
and JScript < 6 use prototype-based inheritance.

And yes, `this' within the mOver() method will refer to the calling
object, which is the "div" element in the case the event listener for
the "mouseover" event is called. However, yours is the proprietary
approach, the standards compliant approach would be to add an event
listener using the addEventListener() method of the DOM object.

How could I then access the instance of Item class, from within
mOver method?

As Martin said, but we are still not talking about classes.

It would be perfect if I could have only one object, the div element,
and then I could easily add methods and properties, and there would be
only one 'this' to work with....I know how to do it with 'regular' js,

What do you consider "'regular' js"?

but how to put that in OO form,

What do you consider "OO form"?

so that I can create a new instance with: new Item() ??

I do not really understand what you intend to do. I assume that you want
to add properties to objects. Fine. Just get a reference to the object
and add properties (as long as the DOM lets you do it.) No prototype and
no constructor required.

If you rather want to add properties to all the "div" element objects,
whether this is possible depends on the DOM. The "div" element is
represented in the DOM of the UA as a host object, if that. Unless
that DOM allows you to access the prototype of host objects, there is
not a chance to do that. The Gecko DOM, e.g., allows to access the
HTMLDivElement prototype, other DOMs AFAIK do not, so if you want that,
you are required to iterate the collection of HTMLDivElement objects.


PointedEars

 

[Lasse Reichstein Nielsen]

A constructor should not return anything.

It is perfectly legal for a Javascript funtion to return a value, even
when it is meant to be used as a constructor. If the returned value
is an object, it is used as the value of the "new" operator expression
instead of the created object.

In this case (returning "this") it's redundant, though.

/L

 

[Lasse Reichstein Nielsen]

function Item() {
this.elem = document.body.appendChild(document.createElement('div'));
this.elem.onmouseover = this.mOver;

and mouse over method is something like:

Item.prototype.mOver = function() {
this.className='something';
}

now my question is about using 'this' inside function above...Am I
right that it is acctually 'this' reference from onmouseover, thus
referencing div element, not instance of Item class?

If I read you correctly, then yes.
The "this" operator refers to the object on which the function was
called as a method. It's not bound to where the function was first
assigned as a method. In Javascript, the function is independent of
the objects it lives on, and only the way it is called defines what
"this" refers to in its body.

How could I then access the instance of Item class , from within
mOver method?

Change:
this.elem.onmouseover = this.mOver;
to
var self = this;
this.eleme.onmouseover = function(){ self.mOver(); };

It would be perfect if I could have only one object, the div element,
and then I could easily add methods and properties, and there would be
only one 'this' to work with....I know how to do it with 'regular' js,
but how to put that in OO form, so that I can create a new instance
with: new Item() ??

Regular Javascript *is* object oriented. But I guess what you mean can
be achieved by:

function Item() {
var elem = document.body.appendChild(document.createElement('div'));
elem.onmouseover = Item.mOver;
return elem;
}
Item.mOver = function() { /* whatever... */ };

Then
var someItem = new Item();
would make someItem point to the element with the onmouseover already
in place. However you could just write
var someItem = Item();
instead, so maybe just renaming "Item" to "createItem" and dropping the
"new" would be better.

/L

 

[Thomas 'PointedEars' Lahn]

A constructor should not return anything.

It is perfectly legal for a Javascript funtion to return a value, even
when it is meant to be used as a constructor. [...]

That is why I wrote "should not" and not "must not".


PointedEars

 

[ivanhoe]

What do you consider "'regular' js"?


What do you consider "OO form"?


I do not really understand what you intend to do. I assume that you want
to add properties to objects. Fine. Just get a reference to the object
and add properties (as long as the DOM lets you do it.) No prototype and
no constructor required.

well, no...just adding properies to existing objects using DOM methods
is what i called 'regular' js...I know how to do it that way...since I
was reading something about prototypes in js, I was curious about
other aproach of creating custom objects using new(what I called OO
way, which is pretty stupid name since I know js is all OO, but
couldn't think of anything better )

see below for what I hope is more clear explanation...

If you rather want to add properties to all the "div" element objects,
whether this is possible depends on the DOM. The "div" element is
represented in the DOM of the UA as a host object, if that. Unless
that DOM allows you to access the prototype of host objects, there is
not a chance to do that. The Gecko DOM, e.g., allows to access the
HTMLDivElement prototype, other DOMs AFAIK do not, so if you want that,
you are required to iterate the collection of HTMLDivElement objects.


PointedEars

basicly I wanted a way to have an object that inherits DIV element, so
that I can do new Item() and get my custom div element created in
return...just like using document.createElement, and then adding stuff
to it, but through use of prototypes....why do I need that? Well, no
reason at all, just was wondering would it be possible....

I know I can use prototype to change all DIV's, but is there a way to
inherit it?

 

[ivanhoe]

Regular Javascript *is* object oriented. But I guess what you mean can
be achieved by:

function Item() {
var elem = document.body.appendChild(document.createElement('div'));
elem.onmouseover = Item.mOver;
return elem;
}
Item.mOver = function() { /* whatever... */ };

Then
var someItem = new Item();
would make someItem point to the element with the onmouseover already
in place. However you could just write
var someItem = Item();
instead, so maybe just renaming "Item" to "createItem" and dropping the
"new" would be better.

well, yes you're 100% right about that...but as I mentioned in other
reply I don't really need this done anyhow, but I'm more of killing
spare time by experimenting with creating custom objects and
inheriting them, so I was hoping for stricly OO way of doing the
exactly the same as your code does, but by inheriting DIV
object(class, prototype, or how ever it's called in js terminology..),
adding aditional functionality to it and then creating instance of it
by using new...

if it's possible, that is...if not, i'll have to go thinking of some
new useless complication to ask about )
Thanx for helping in any case