Scope inside a prototyped function?

[BrianMH]

I'm trying to access some of the global's inside my class LiveSearch
and I have no idea how to go about it. Here is what I have so far:

<script type="text/javascript" src="query.js"></script>
<script type="text/javascript">
function LiveSearch(global) {
this.theglobal = global;
this.initialize();
}

LiveSearch.prototype.initialize = function() {
$("#thebutton").mousedown(function() { //when we click the button
alert(this.theglobal);
});
}

$(document).ready(function() {
var objSearch = new LiveSearch("globalvalue");
});
</script>

On page load I create a new LiveSearch instance and it assigns
theGlobal = "globalvalue" and proceeds to initialize(); At this point
Im using JQuery to setup an onmousedown event on a button on my page
with id="thebutton". When I click the button the alert comes back with
'undefined'. How can I get direct access to my theglobal variable?

The only way I have found so far is by adding a local variable to my
initialize() func and alerting the local variable:

LiveSearch.prototype.initialize = function() {
var theglobal = this.theglobal;
$("#thebutton").mousedown(function() { //when we click the button
alert(theglobal);
});
}

Now this works fine, but Im only accessing a local copy of theglobal,
so I cannot alter its value. (setting theglobal = "somethingelse"; only
alters my local copy, not the one specified in my class constructor).
Is there a way to do this?

The answer is probably all to obvious, but Im beating my head against a
wall here trying to come up with the answer - thanks ahead of time guys!

 

[RobG]

I'm trying to access some of the global's inside my class LiveSearch
and I have no idea how to go about it. Here is what I have so far:

<script type="text/javascript" src="query.js"></script>
<script type="text/javascript">
function LiveSearch(global) {
this.theglobal = global;
this.initialize();
}

LiveSearch.prototype.initialize = function() {
$("#thebutton").mousedown(function() { //when we click the button
alert(this.theglobal);
});
}

$(document).ready(function() {
var objSearch = new LiveSearch("globalvalue");
});
</script>

On page load I create a new LiveSearch instance and it assigns
theGlobal = "globalvalue" and proceeds to initialize(); At this point
Im using JQuery to setup an onmousedown event on a button on my page
with id="thebutton". When I click the button the alert comes back with
'undefined'. How can I get direct access to my theglobal variable?

A function's this operator always refers to the object that it has been
called as a method of. It is not static, its value is determined when
the function is called, each and every time.

When you call LiveSearch() as a constructor, its this operator refers
to the newly created object. When you attach that object as a method of
some DOM object (e.g. an onmousedown handler), and it is called by the
mousedown event, its this operator refers to the DOM object.

The only way I have found so far is by adding a local variable to my
initialize() func and alerting the local variable:

LiveSearch.prototype.initialize = function() {
var theglobal = this.theglobal;
$("#thebutton").mousedown(function() { //when we click the button
alert(theglobal);
});
}

In the above, the outer anonymous function object is given a
'theglobal' property that is the value of the newly constructed
object's theglobal variable (which is whatever 'global' was at the time
it was constructed). When it is executed, that is the value that is
shown.

Now this works fine, but Im only accessing a local copy of theglobal,
so I cannot alter its value. (setting theglobal = "somethingelse"; only
alters my local copy, not the one specified in my class constructor).
Is there a way to do this?

Create 'global' as a public property of the constructor and reference
that. In the following small example, Foo.global is first set to 'bar'
when Foo is called for buttonA, but then changed to 'sod' when it is
called for buttonB.

I've modified your stuff a bit so that Foo works more generically, but
I think in principle it's the same.

<script type="text/javascript">

function Foo(global, id){
this.theGlobal = global;
this.initialise(id);
}

Foo.prototype.initialise = function(id){
Foo.global = this.theGlobal;
document.getElementById(id).onclick =
function(){alert(Foo.global);}
}

window.onload = function(){
new Foo('bar', 'buttonA');
new Foo('sod', 'buttonB');
}

</script>

<input id="buttonA" type="button" value="Button A">
<input id="buttonB" type="button" value="Button B">
<input type="button" value="Button C" onclick="alert(Foo.global)">


Note that Foo.global is accessible from anywhere, as shown by buttonC.
Is that what you wanted?