What is “this”?

There are only two hard things in Computer Science: cache invalidation and naming things. — Phil Karlton

This is part two of a five part series. For extra context see Understanding Function Objects in JavaScript.

The keyword “this” is an aspect of Javascript programming that confuses a lot of people. I think this is largely due to the fact that “this” was a horrible name choice. I very much prefer Ruby’s label of “self” for this concept. The basics of what “this” is are fairly simple. Lets start right away with a small example:

var obj = {
 x: 1,
 fun: function(){ console.log(this.x); }
};
obj.fun(); // logs '1' to the console

Here I have defined a Javascript object that has two properties: x, which is assigned to the value 1, and fun which is assigned to a simple function that uses the “this” keyword. When I call the function fun that is a property of the object obj, it will log the value that is assigned to x. So “this” is the object that the variable obj refers to when I use the function fun like this: obj.fun(). My favorite rule of thumb for the keyword “this” is that “this” is the thing that is to the left of the dot of the function invocation (in most cases…).

“This” is a fairly simple concept in programming languages where function objects aren’t part of the language standard. This is because with function objects, what “this” is when referenced in a function can be different depending on the situation. In languages where function objects don’t exist, “this” always refers to the same(ish) thing for a given function. So if Javascript did not support the concept of function objects, “this” in the function “fun” above would always refer to the object “obj”. This is because it would not be possible to use the function fun without referring to obj. But because Javascript does support the concept of function objects, it is possible for us to use the function fun in any context we want. What do I mean by that? Well, here is an example:

var new_fun = obj.fun;
new_fun(); // throws a runtime error (probably)

In the above snippet, I have declared a new variable “new_fun” that I then assign to the function object “fun” that is a property of “obj”. Now what happens when I try to invoke new_fun in the second line? You might think that nothing special will happen and that we will just log 1 like before. But that likely isn’t what will happen. A runtime error is likely to occur when we try to invoke new_fun like this. This is because new_fun refers to “fun” alone. new_fun as it is currently defined does not have any reference to the definition of the object obj. It simply has the function object “fun” that is also assigned as a property of obj. It is very similar to “var number = obj.x;”. “number” is a variable that now holds a reference to the value 1 and only the value 1. It has no information about the object from which the value 1 originally came.

So what is the deal? Why would we ever want to do this? I have one word for you, my friend: callbacks. In javascript programming, and especially in asynchronous programming (YAY NodeJS!), we often want to perform some operation after the results of another operation are available. In the case that we want to call a function on a given object (like obj.fun()), we will want to be able to have the this keyword in that function still refer to obj once it is called. Now with this little motivating factor, we are going to dive into the wonderful world of call, apply, and bind.

This is part two of a five part series (1, 2, 3, 4, 5). The next post is Bind, call, and apply. Oh my!