Which ‘this’ is that in JavaScript?

Posted on Nov 16, 2014


The keyword this is a common convention in object oriented programming languages. Its purpose is to perform actions or create properties on the specific instance of the class or object that is being worked with. We will look at the unpredictable and confusing effects of using this in JavaScript, and the steps to take to know exactly what this refers to in any given situation.

In many cases, this does not refer to what your initial intuition would suggest in JavaScript. When it comes to function invocation time, unless you have a good deal of experience in working with this in JavaScript, it is generally safer to assume that you have no idea what this actually refers to.

Make Some Friends

First, a simple example. You have two friends: Sir Allan Sammy Boy and Carlton Christopher Coolidge Cumberbatch the Seventh. You make a class to make a couple friends:

The above example is straightforward and behaves the way one would expect. When creating a new Friend, the this refers to the specific friend we are creating.

Function Invocation

However, what happens when you use this in a function invocation? Something that is not immediately obvious is that a this is created for every function invocation. It essentially acts as an invisible argument of the function, and it is helpful to think of it in those terms. That is where the confusion really comes from, as what this points to in that situation entirely depends on how and where that function was invoked.

You should think of this in the same as you would think of obj in the above example, where obj has been bound to friendOne. In fact, doing the following will produce the same result.

Global window Object

But what happens when you do the following?

That will not produce the right name, because this was never bound to anything specific. By default, it will refer to the global window object. Since window does not have a name property, that lookup will fail.

The fact that this will refer to the window object was a decision that was made in the construction of the JavaScript language that is regarded as a well-known design flaw. Regardless, we must deal with it as it is.

Specify Your this

To fix that situation is to explicitly bind this to what your desired target is.

The above demonstrates how you can treat this as a variable or argument that is automatically created at function invocation time. Above, we have simply told the function exactly what we want to do with this. It works, but it is not a very elegant solution to every problem.

Using this With a Method

Let’s try a change of tactic. Let’s make the salutation function a method on our Friend class.

In this case, it may seem obvious what this refers to, but it leads us right to the most important step for determining what this refers to in any given situation.

How to Know Thy this

Here are the steps to take to know what this refers to every time:

  1. Using the debugger or other method, locate where this is being referenced
  2. Look for the curly braces of the nearest enclosing function: the salutation method
  3. Ignore curly braces such as object literals and if statements
  4. Look to where that function was actually invoked: where we actually call friendOne.salutation()
  5. Look at the the object directly to the left of the function or method invocation: friendOne

Since friendOne was the object immediately preceding, or to the left of the method invocation, that is the context set for this when the function is invoked.

There are additional options for explicitly setting this by using global methods such as .apply(), .call(), or .bind(). We will explore those in more detail in a later post.

Trackbacks/Pingbacks

  1. Simple use of bind() in JavaScript | nicmitchell.com - […] the last post, we discussed using this in JavaScript and how it might not refer to what you want…

Submit a Comment

Your email address will not be published. Required fields are marked *