This post discusses the this keyword, what it represents, how it can catch you out and how to avoid those problems. It also introduces the functions call and apply from the Function prototype.
Let's start with a definition -
The value of this is determined at the point at which the function is invoked, and is set to the object on which the function is invoked
And expressed as pseudo code -
In many ways it's easier to think of this as an argument to the function, rather than as something that is associated with the function itself, as it would be in Java/C#/etc.. If you're more used to a Java/C# here's an example showing everything working the way you'd expect -
However, here are two examples showing things working in a way you might not expect -
The problem with the first example is that the function it is not invoked on our object or indeed any object. Therefore within the function this defaults to the global object, which happens to be the window object in browsers.
In the second example, we've created a reference to our function on a new object (obj2) and invoked the function on it. Therefore within the function this is a reference to obj2.
We can easily re-write both of the problematic examples so that they function correctly by using a bit of indirection (and closure) -
And that's all there is to it, the rest of the post goes on to describe the last pieces of the puzzle, however for most development you won't need to know anything else.
As the caller of a function you can also have explicit control over the value of this with the call and apply functions e.g.
(The difference between call and apply is how they deal with the arguments following the this value. Call expects a number of further arguments to be passed to the function. Whereas apply expects a second argument which is an array of the arguments to be passed to the function.)
Some libraries (e.g. Prototype, MooTools, DoJo, etc.) take advantage of these functions and allow you to "bind" the value of this to a function. The libraries normally provide a new function on the Function prototype e.g.
A simple implementation of "bind" could return a new function that invokes the original function using either the call or apply to set the value of this e.g.
(N.B. this is only a very basic implementation - it doesn't have support e.g. for passing on n arguments, which you'd expect to find in a library method.)
Hopefully this post has cleared things up a bit, if you think it could be clearer let me know and I'll do my best to correct it.