Using the Right Context

When working with JavaScript functions and objects, you need to make sure the code executes in the context it was intended for, otherwise you may get unpredictable results. You saw earlier that the same code can have different output when executing inside a function or in the global context.

Things get a little more complicated when using the this keyword. As you know, each function call creates a new context in which the code executes. When the context is created, the value of this is also decided: When an object is created from a function, this refers to that object. In the case of a simple function call, no matter if the function is defined directly in the global context or in another function or object, this refers to the global context.

The second point is particularly important. Using this in a function that is meant to be called directly, rather than instantiated as an object, is a bad programming practice, because you end up altering the global object. Take this example that demonstrates how you can overwrite a global variable from within a function:

x = 0;
function BigTest()
{
this.x = 1; // modify a variable of the global context
}
BigTest();
document.write(x); // displays "1"

Modifying the global object can be used to implement various coding architectures or features, but abusing of this technique can be dangerous. On the other hand, if BigTest is instantiated using the new keyword, the this keyword will refer to the new object, rather than the global object. Modifying the previous example as highlighted below, we can see the x variable of the global context remains untouched:

x = 0;
function BigTest()
{
this.x = 1; // create an internal object property
}
v ar obj = new BigTest();
document.write(x); // displays "0"

When creating your own code framework, you can enforce that a function's code is executed through a function instance. The little trick involves creating a new object on the spot if the function was called directly, and using that object for further processing. This allows you to ensure that a function call will not modify any members of the global context. It works like this:

x = 0;
function BigTest()
{
if (!(this instanceof BigTest)) return new BigTest();
this.x = 1;
}
BigTest();
document.write(x); // displays "0"

The highlighted line simply checks if the this keyword refers to an instance of BigTest (the instanceof keyword is used for this). If it's not, a new BigTest instance is returned, and execution stops. The BigTest instance, however, is executed, and this time this will be a BigTest instance, so the function will continue executing in the context of that object.

This ends our little incursion into JavaScript's internals. The complete theory is more complicated than that, and it's comprehensively covered by David Flangan's JavaScript: The Definitive Guide, Fifth Edition (O'Reilly, 2006). The FAQ at http://www.jibbering.com/faq/ will also be helpful if you need to learn about the more subtle aspects of JavaScript.

First Page: Microsoft AJAX Library - JavaScript Execution Context