PDA

View Full Version : WEIRD problem with 'this' and functions etc.

krycek
11-04-2002, 04:08 PM
This is a crazy problem, and has probably come about due to a lack of understanding on my part :o

I have created a mouse object that handles all my mouse events, and it works perfectly. The only trouble is, it somehow does not seem to be using its properties in the way I would expect!!! :eek:

This is the basic code:

function MouseObject() {
document.onmousedown = this.down
this.button = null
}
MouseObject.prototype.down = function() {
this.button = event.button
}
mouse = new MouseObject()

Now, when I put an alert() INSIDE the mouse.down function, it returns the button just fine. However, if I try to access the value from OUTSIDE, I just get null! :confused:

The weird thing is, I have a very long and complicated script based around this concept, and it all works fine! I have only just discovered this issue because I am now trying to access the mouse.button property from another function.

Any ideas, anyone? :confused:

::] krycek [::
krycek
11-04-2002, 05:14 PM
:eek: Help? ...anyone? Please??? :eek:

::] krycek [::
beetle
11-04-2002, 06:07 PM
Hmmm. Thinking....

You sure mouse is global?

Can I see the code/context under which your other function is accessing the button property?
krycek
11-04-2002, 06:28 PM
well I am pretty sure mouse is global... if, having defined it in the example I gave, it should be global, then it is...

my other function is simple :)


function MouseObject() {
document.onmousedown = this.down
this.button = null
}
MouseObject.prototype.down = function() {
this.button = event.button
return onMouseDown()
}
mouse = new MouseObject()

function onMouseDown() {
alert(mouse.button)
}


That is the original code I gave, with the extra function added. The idea is that the mouse object handles all mouse events, and then calls various other functions which can be redefined elsewhere. This way, I can include the script file in a page, and then define onMouseDown() somewhere else, you see?

But it says that mouse.button is either null or undefined... :confused:

Maybe the way I am referring to it is wrong, but the weird thing is, I have LOADS of other scripts which together make up the API I am building, and they all work fine! The only difference is that the other object are based on DIV layers, but I do not see how that should matter...? The technique is the same...?

So... how do I check that mouse is global?

Cheers!

::] krycek [::
beetle
11-04-2002, 08:00 PM
mouse certainly seems to be global from where I sit. A way to test, though...

alert(mouse === window.mouse)

Uh, is it kosher to give a function name something that is identical to an event? (onMouseDown)
krycek
11-04-2002, 09:17 PM
well, I do believe mouse should be global. The test you posted returns "true", so it should be!

I have tried renaming everything - but still the problem!!! So, I am including a script which demonstrates the issue.


<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function MouseObject() {
document.onmousedown = this.down
this.button = null
}
MouseObject.prototype.down = function() {
alert(event.button)
this.button = event.button
alert(this.button)
return onMouseDown()
}
mouse = new MouseObject()

function onMouseDown() {
alert(mouse.button)
}
</script>
</head>
<body>
</body>
</html>


Notice that I have three alerts in there now - the first two return the expected result, the third does does not!!! :confused:

I have also attached the script as a html page so that people can download it and try for themselves (just rename it from mouse.txt to mouse.htm!)

Please, please, please someone try this script themselves!

I would love to know what I am doing wrong, and how I can access these values properly!!!

Cheers all (especially beetle :))

::] krycek [::
beetle
11-04-2002, 09:28 PM
I got this to work<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function MouseObject() {
document.onmousedown = this.down
this.button = null
}
MouseObject.prototype.down = function() {
alert(event.button)
this.button = event.button
alert(this.button)
return onMouseDown(this)
}
var mouse = new MouseObject(this)

function onMouseDown(o) {
alert(o.button)
}
</script>
</head>
<body>
</body>
</html>Don't know if that's what you want tho...
krycek
11-04-2002, 09:40 PM
Hmmm... interesting! A very simple solution, which I had not thought of! I may just use it! :D

...however, I would love to know why the original script does not work!

Has anyone got any ideas...?

::] krycek [::
beetle
11-04-2002, 09:59 PM
well, after this little testMouseObject.prototype.down = function() {
alert(this.nodeName);
alert(event.button);
this.btn = event.button;
alert(this.btn);
return onMouseDown();
}I learned that this in your protoype is referring to document and not mouse. I don't have much experience with prototyping, especially with heavily OO stuff like this....so I'm not sure how to correct it....
krycek
11-04-2002, 10:21 PM
Hmmmm... intriguing... thanks for finding that out! :)

I have another function which creates a custom object based on a DIV, and does so like this:


function myObject(divName) {
this.elm = document.all[this.divName]
this.css = this.elm.style
this.doc = document
this.obj = this.divName + "myObj"
eval(this.obj + "=this")
}
myLayer1 = new myObject("layer1")


...where layer1 is a DIV.

I know that the eval() part somehow reassigns the value of this, but I am not sure how, or why... I know that it works, though! :D I have been fooling with my mouse object trying to make the same thing happen, but I can't... probably because my mouse object is script only and not based on a DIV.

Hmmmmm.

Any ideas about that beetle? Maybe you will be able to spot something there that I can use... or, anyone else, for that matter...?

::] krycek [::
krycek
11-04-2002, 10:26 PM
As a follow-up, I quickly checked the value of document.button in the onMouseDown() function, instead of mouse.button... and, you are right... it returned a value, so this is indeed referring to document and not to mouse!

...why, is another question! :confused:

::] krycek [::
whammy
11-05-2002, 01:04 AM
Uh, is it kosher to give a function name something that is identical to an event? (onMouseDown)

No... even if it DOES work for the script/program in question, that's just horrible programming practice. ;)
krycek
11-05-2002, 11:53 AM
well... In this instance the function is named that for a very good reason... but never mind :)

In every other instance I would agree that naming the same as an exisiting event, object, function etc. is bad.

However, it still does not help solve the referral problem! Why is 'this' the document and not the mouse object? :confused: And how can I tell it otherwise?

::] krycek [::
krycek
11-05-2002, 03:32 PM
...still not solved...

has ANYONE got ANY ideas about this? :confused:

::] krycek [::
krycek
11-05-2002, 11:06 PM
Surely someone out there knows the correct procedure to accomplish this task!!!??? :confused:

For example:


function myFunction() {
this.myValue = "hello"
}

greeting = new myFunction()

alert(greeting.myValue)


The above code will, of course, return "hello". The problem arises as follows:


myFunction.prototype.mySecondFunction() {
this.mySecondValue = "welcome"
}

alert(greeting.mySecondValue)


The above will return "undefined"! Instead of assigning "welcome" to myFunction, or even to myFunction.mySecondFunction, it is being assigned to the document, so to get the value:


alert(document.mySecondValue)


Does anyone know why this is happening...? :confused: I have recieved some valuable help from beetle, but no-one seems to have an answer. Please, I need some ideas!!! :eek:

Tying in with this problem, what is the correct method of assigning an object as "this"? This works...


function myFunction(name)
this.obj = name + "myObject"
eval(this.obj + "=this")
...

}


...but that is part of a script for basing an object on a DIV.

Heeeeellllllllppppppp!!!!!!!!!!

::] krycek [::
ConfusedOfLife
11-05-2002, 11:56 PM
I don't have much experience with prototyping, especially with heavily OO stuff like this....

I couldn't understand anything! I even didn't know that mouse has an object like this and I absolutely have no idea of prototyping, does anyone know a link/book/article that shows the way? I even couldn't believe that OOP is supported in JS, is it really?
krycek
11-06-2002, 12:02 AM
Yes - JavaScript is actually a very powerful OO language :) You can make custom objects, and nest functions and objects inside other functions and objects...

...and that's where I got stuck :( The mouse object is one I created, not a pre-existing JS object, you see.

Look up prototype on google to find some good intros, however my searches have not turned up anything specific to this problem, as most articles do not go into the level of detail I need :(

::] krycek [::
whammy
11-06-2002, 12:36 AM
Hmm... this is not my strong point(yet). Perhaps glenngv, beetle, john, adios, or another javascript guru will read your post. Where's Dave Clark when you need him ?!?