JavaScript OOP - Scopes and Contexts

[Update: thanks to Howard, I've updated the typo regarding global functions.]

In a previous post, we've talked about scopes. Today we'll be talking about execution contexts. Every line of JS code you write runs in a certain execution context. If you're coming to JS from an object oriented language, then you should recognize this concept. In Javascript, you can use the this keyword to access the current execution context. Even though it's not the most precise way defining it, you can think of this as referencing the object that the code is currently inside of. In practice, this will always return a valid reference.

You probably recall our previous post on scopes. At the time, I've said that global scope variables end up being added to the window object. This happens because window represents the default execution context at that scope. We need an example to better understand execution contexts. Take a look at the following snippet:

//current execution context: window
var globalMsg = "Hello";
function sayHi() {
    //new scope: globalMsg is local
    //but this still points to global execution context
    var globalMsg = "Inside hello";
    alert(globalMsg + "-" + this.globalMsg);
}
var obj = {
    globalMsg: "Hallo!",
    sayHi: function() {
        //new scope
        //notice that execution context is the object
        //itself and not window
        alert(this.globalMsg);
    }
};
sayHi();
obj.sayHi();

The previous snippet "mixes" scopes and execution contexts. We start by declaring a global variable and we initialize it to "Hello". We then create a global function (sayHi). As you know by now, functions introduce new scopes. However, they don't influence the "current" execution context. This leads to two conclusions:

• inside the global sayHi, the globalMsg identifier will always reference the "local" variable declared within the function body (because that function introduced a new scope and that means that "local" variables declarations hide global variables);
• the this reference still references the default context, ie, this still references the global window object (notice that I'm assuming that we're talking about an HTML page).

If you understand the previous observations, then you won't be surprise to see that executing the global function sayHi results in showing an alert with the text "Inside Hello-Hello".

obj is also a "global" variable which has been "added" to the window object. In the previous snippet, obj references an anonymous object which has a property and a function. The most important thing you should take from the code is that when you execute the obj.sayHi() call, you're introducing a "new" execution context within the obj.sayHi function: in this case, this references the current object instead of the global window object. That's why that function call will show an alert message with the "Hallo!".

Javascript allows us to set up the execution context of a function (that is, JS allows us to change the value of the this reference that gets passed to the executing function). To do that, we need to use the apply or the call methods of the function object (the main difference between the two rely on the way we pass parameters to the function - I'll probably be back to this topic in a future post)

Lets translate our knowledge on execution contexts to write a function that changes the background color of any element. We can reuse our knowledge of execution contexts to do that. Before we write the code, let's add some HTML to the test page:

<p id="paragraph">This is a paragraph</p>
<div  id="div">This is a div</div>

And now, we can write the global function that changes the background color:

function changeColor(color) {
    this.style.backgroundColor = color;
}

Ok, now we're only missing one thing: how to influence the execution context of the function and make it reference the adequate element. If we call the function, this will reference the window object (and you'll end up with an error because window doesn't have a style property). That's why we need to use the function's apply method. Here's the code for changing the background color of the paragraph to red:

changeColor.apply(
    document.getElementById("paragraph"), //set this reference
    ["red"] //array of parameters 
    );

the first parameter establishes the execution context (ie, the this reference) inside the changeColor function. Notice that apply expects an array with the values that will be passed to the function during the "current" execution.

Understanding execution contexts and how to influence them is really important. This feature is heavily used by all JS platforms. For instance, JQuery uses it a lot in several places so that this points to the "current logic" element. And now you know how you can take advantage of this feature in your code too. Keep tuned for more on Javascript.