Scope inside a prototyped function?

Discussion in 'Javascript' started by BrianMH, Sep 8, 2006.

  1. BrianMH

    BrianMH Guest

    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!
     
    BrianMH, Sep 8, 2006
    #1
    1. Advertising

  2. BrianMH

    RobG Guest

    BrianMH wrote:
    > 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?


    --
    Rob
     
    RobG, Sep 9, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sandra-24
    Replies:
    5
    Views:
    329
    Fabio Zadrozny
    Mar 1, 2006
  2. Sur
    Replies:
    4
    Views:
    193
  3. Paul Lalli
    Replies:
    2
    Views:
    294
    thundergnat
    Aug 26, 2005
  4. Replies:
    2
    Views:
    101
    Lasse Reichstein Nielsen
    Oct 8, 2008
  5. Andrew Falanga
    Replies:
    2
    Views:
    202
    Andrew Falanga
    Nov 22, 2008
Loading...

Share This Page