Professional JavaScript: Chapter 3: Prototype and Scope Chains | 2

Professional JavaScript

Scope Chains

Prototype chains describe how to rummage around in an object looking for a property. How does JavaScript decide which object or objects to rummage around in?

A scope chain is used by the JavaScript interpreter in order to determine which objects to examine for a given property name. Each object so determined will then have its prototype chain examined. There must always be at least one candidate object, even if it is just the global object.

A scope chain's details are not accessible to the scriptwriter. It is part of the script's "execution context," or "thread of execution," or "interpreter instance," or "housekeeping data," whichever you prefer. All those terms mean it's something present you can rely on, provided you don't go outside the familiar embrace of the interpreter. There are some under-the-hood techniques involving special properties that start with double-underscore. However, they are mostly of use to programmers who embed JavaScript interpreters in other products and languages, and this book doesn't cover that topic extensively. See Chapter 22 for what we do cover on Embedded JavaScript.

According to ECMAScript, the scriptwriter can't directly interact with the scope chain. However, it is easy to change it, particularly using the with statement as this example shows:


var plant = 'Geranium';                // == window.plant
var outside = new Object;              // == window.outside
outside.furniture = 'Banana Lounge';   // == window.outside.furniture
outside.plant = 'Willow';              // == window.outside.plant
outside.inside = new Object;           // == window.outside.inside
outside.inside.plant = 'Ficus';        // == window.outside.inside.plant
alert(plant);
with ( outside )
{
  alert(plant);
  with ( inside )
  {
    alert(plant);
    alert(furniture);
  }
}

Not surprisingly, the example displays alerts for Geranium, Willow and Ficus in that order. It may come as a surprise that Banana Lounge is then displayed as well, even though the inside object has no furniture property.

The reason Banana Lounge is displayed is that the with statement does not replace the object usually scrutinized when an identifier name is encountered. Instead, it adds an object to the scrutiny process.

The object added (the argument of the with statement) is the "current object" or "current scope," to use familiar terminology, but it is really just the first in a list of such objects. This list is called the scope chain. Objects in the scope chain are consulted in order until the identifier matches one of the object's properties.

In the above example, each with statement adds an object to the front of the scope chain when it starts, and removes that item when it ends. When the innermost statements are executed, the chain consists of three objects: inside, outside, and window. inside is consulted first.

The business of scope chains is a subtle source of bugs. Since it is possible to locate all the property names of all the objects in the scope chain, not just those of the object at the head of the chain, there are many more opportunities to accidentally clash with an existing name.

Finally, this extremely simple example leaps ahead a little, drawing elements from Chapter 4 on browsers and Chapter 7 on Forms and Data. It shows that the interpreter may organize the scope chain before a piece of script even starts running, based on the context in which it runs:

<script>
  function show_name(x)
  {
    alert(x);
  }
</script>

In this example, both the show_name() function and the name property are correctly identified inside the event handler (the bit of code following ONCLICK in line 8). However, show_name() is only a property of the window object, while name is a property of the window, form and element (button) objects. Since the button's name is passed to the alert box, both window and button objects must be in the scope chain, and the button object must be before the window object. Very convenient, as it saves using "window.show_name()" in the event handler code, but it does create extra opportunities for name mix-ups, as in the non-handler case.

Particularly confusing in Web browsers can be the use of identifiers such as location which exist in both the window and document objects Â that is why it is wise to prefix identifiers in browsers with "window." everywhere that is practical Â see the debug chapter.

[previous]

and
Created: February 2, 2001
Revised: February 2, 2001

URL: http://webreference.com/programming/javascript/advanced/chap3/

Professional JavaScript: Chapter 3: Prototype and Scope Chains | 2

Professional JavaScript

Scope Chains

Find a programming school near you