SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    scope issue? property of object undefined when it's been set

    oh dear i've been reading javascript;the definitive guide book thinking i was getting it but trying to write some js clearly indicates not. why, in the following, is the object's 'greeting' property's value undefined rather than "hello" in the following code by the time it gets accessed on a rollover?:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Untitled</title>
    </head>
    <body>
    <p>
    <span id="roll">rollover</span>
    </p>
    <script type="text/javascript">
    function Test() { this.greeting = "hello"; }
    Test.prototype.displayAlert = function(evt) {
    	alert( this.greeting );
    }
    function runOnLoad() {
    	var testObject = new Test();
    	var roll = document.getElementById("roll");
    	roll.onmouseover = testObject.displayAlert;
    }
    if(window.addEventListener)
    	window.addEventListener("load", runOnLoad, false);
    else if (window.attachEvent) window.attachEvent("onload", runOnLoad);
    else window.onload = runOnLoad;
    </script>
    </body>
    </html>
    thanks.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this refer's to the span element #roll.

    I'd do this like:

    Code javascript:
    var Test = function() {
        // allows you to access the instance of the class
        var me = this;
     
        this.greeting = 'hello';
        this.displayAlert = function(evt) {
            // me is the instance being called, thus allowing you to access the variable
            alert(me.greeting);
        }
    }


  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    this refer's to the span element #roll.
    ah right, i see. that helps greatly. ok, i'll give your way a go. thanks very much.

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In JavaScript, functions are first class objects and can be passed around like any other variable. This means the context in which they run can be changed dynamically as they are passed around. For example, you assign the displayAlert function of your Test object to the onmouseover property of the roll element, changing its context.

    The keyword 'this' refers to the object acting as the current context for the function. In your case, when the mouseover event triggers the displayAlert function, 'this' refers to the roll element. To test this you could assign a greeting property to roll.
    Code:
    roll.greeting = "hello from roll";
    You wouldn't get an 'undefined' message now.

    So, be careful using 'this' unless you are sure of the context. It is common to see 'this' assigned to another variable while its context is known and the alternative variable being used instead.
    Code:
    var me = this;
    // or
    var that = this;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •