View source

<noinclude>
{{blognav|[[Bespin trepanation]]|[[JavaScript loop closures]]}}
{{blog entry header}}
{{dzoneit}}
</noinclude>A few days ago I wrote about [[Aspect Oriented JavaScript]], explaining how to replace a given function or method with a wrapper.  To fully understand that concept, a proper understanding of JavaScript's treatment of <code>this</code> is helpful.  This article aims to provide a simple overview of how <code>this</code> is determined in various JavaScript contexts.<noinclude>

Let's start with an example.  Consider the Bob:
<source lang="javascript">
var Bob = {
  name: "Bob",
  greet: function() {
    alert( "Hi, my name is " + this.name );
  }
};
</source>

Here, we've created an <code>Object</code> instance which has two members:
* <code>name</code>, a simple string, and
* <code>greet</code>, a method containing a reference to <code>this.name</code>.

When we execute <code>Bob.greet()</code>, the greet function is executed with <code>Bob</code> as the <code>this</code> object.

Now let's consider what happens when we co-opt Bob's greet on a new object:
<source lang="javascript">
var Alice = {
  name: "Alice",
  greet: Bob.greet
};
</source>

Which of the following should <code>Alice.greet()</code> to produce?
# <code>"Hi, my name is Bob"</code>, or
# <code>"Hi, my name is Alice"</code>

If you answered "#2", you are correct!  The <code>this.name</code> reference in Bob's greet function is not resolved until the function is actually executed.  When <code>Alice.greet()</code> is called, the greet function's <code>this</code> is set to Alice.

But what if the function is called by itself, not as a method on an object?  Consider this:
<source lang="javascript">
var unboundGreet = Bob.greet;
unboundGreet();
</source>

What do we expect <code>unboundGreet()</code> to produce?  The answer is <code>"Hi, my name is "</code>.  The reason is that <code>this</code> is set to the <code>window</code> global when an unbound function is called, and since <code>window.name</code> is undefined, it becomes the empty string during concatenation.

Here's an example where implicit unbinding can become a debugging headache:
<source lang="javascript">
setTimeout( Bob.greet, 1000 ); // Call Bob.greet 1 second from now
</source>

The developer expectation might be that Bob's greet would be called in 1 second, bound to Bob, thus producing <code>"Hi, my name is Bob"</code> - but that is not what happens.  Instead, the greet method is called unbound, producing the same result as <code>unboundGreet()</code>.

It might be a little clearer to see why this is by looking at an equivalent snippet:
<source lang="javascript">
var unboundGreet = Bob.greet;
setTimeout( unboundGreet, 1000 );
</source>

In this case, it should be more obvious that the greet function will be not bound at execution time (1 second hence).

The same thing happens when trying to set an Object's method as an event handler.  Consider this HTML:
<source lang="xml">
<a id="clickme" href="">Greetings!</a>
</source>

And this JavaScript:
<source lang="javascript">
document.getElementById("clickme").onclick = Bob.greet;
</source>

The expectation may be that this would cause the clickme anchor to produce <code>"Hi, my name is Bob"</code> when clicked, but the result is (once again) the same as calling <code>unboundGreet()</code>.

The solution to the implicit unbinding problem is to create a function which wraps the bound method.  Many JavaScript libraries contain helpers to do this, often times by adding a <code>bind</code> method to the <code>Function.prototype</code>.

Without getting into that though, here's a simple example of how to create such a wrapper:
<source lang="javascript">
var bobsGreet = function() {
  Bob.greet();
};
setTimeout( bobsGreet, 1000 );
</source>

Or, more simply:
<source lang="javascript">
setTimeout( function(){
  Bob.greet();
}, 1000 );
</source>

That's it for this overview.  If this helped you understand the concept better, or if you have any questions, please drop me a comment!

'''Update''': If you liked this, check out '''[[JavaScript loop closures]]''' for more scoping goodness!</noinclude><includeonly>

{{{1|}}}</includeonly>

--[[User:Jimbojw|Jim R. Wilson (jimbojw)]] 14:39, 18 March 2009 (UTC) <noinclude>{{blog entry footer}} __NOTOC__ __DISQUS__</noinclude>