‘This’, AKA The Context in JavaScript

What is ‘This’?

The creators of JavaScript incorporated the identifier ‘this’ to allow object oriented features. It can be confusing or unclear what the keyword refers to at any given time, so this post will give some helpful guidelines. I’ll explain what ‘this’ is, and then how to figure out what it refers to in your code.

In JavaScript, ‘this’, the context, is bound AT CALL TIME. 90% of the time ‘this’ refers to the object on the left of the dot at call time.

The keyword ‘this’ relates to the context, which means what variables are accessible and what their values are. It’s helpful to think of ‘this’ as a hidden variable automatically passed into any function when it is run. ‘This’ can be accessed anywhere within a function, much like the arguments object (which allows access to all the arguments passed into a function).

It’s worth noting that ‘this’ inside a function doesn’t necessarily refer to the function it appears within. ‘This’ is bound at call time, and some techniques such as bind, call or apply allow for explicitly setting the context by passing it in as an argument. These tools are useful when using JavaScript, for instance when using setTimeout.

To figure out what the keyword refers to, always look for the function body the code is enclosed within. In your debugger, find where that function was invoked by looking one level down in the call stack.

The 5 Rules of This

There are 5 rules for understanding what ‘this’ refers to, each related to a specific rule. If you figure out which pattern is in effect, you can identify what the keyword refers to.

1. Global Reference:’This’ Isn’t In A Function

When floating around in the wild, such as the simple program below, the binding target is the global object. In a browser, this is usually the ‘window’ object.

console.log(this); //this refers to the the global object

You might be asking why this is useful. This allows ‘this’ to be accessible from every part of your program, but otherwise doesn’t help much.

2. Free Function Invocation

When a function is invoked, and isn’t a method of an object, we call it free function invocation. Like before, ‘this’ refers to the global object, and isn’t particularly useful.

var func = function(){console.log(“Such wow”)};
func(); // ‘this’ inside func refers to the global object

3. Using .call or .apply

Here and below is where ‘this’ is really useful. The first argument passed into .call or .apply at call time will be what ‘this’ refers to inside the function. This allows us to do the following:

func.call(obj); // inside func, ‘this’ refers to obj

Now within func, ‘this’ refers to obj. Now the following is possible, and powerful- you can pass in any object to a method, executing it as if it were a method of the passed in object! You can also pass in ‘this’ (eg func.call(this)) to preserve the context.

setTimeout(secondFunc.bind(this), 1000); // the context of setTimeout is bound to secondFunc with bind

Bind allows you to create a function with a context you explicitly pass into it. The callbackfunction that consists of the function you pass in with the context you pass in, in this case secondFunc with ‘this’ at setTimeout’s call time. Without using bind to pass in a context, secondFunc’s context would have been the global object (often the window object). 1000 milliseconds later, we might get unwanted results (for instance, we would get an error if secondFunc depends on values inaccessible in global scope). When the callback returned from bind is executed in 1000 milliseconds, ‘this’ inside secondFunc refers to the context we passed into bind, so everything runs as planned.

4. Invoking A Method

‘This’ refers to the object on the left of the dot AT CALL TIME. The method doesn’t have a different context than its parent object: it just inherits its parent context.


When invoking a method, ‘this’ refers to the object housing that method. Methods run in the context of the object to which they’re bound. They can easily access the values of the objects they are housed on, making methods more useful. You will see this pattern all the time when using JavaScript.

5. Construction Mode

The last pattern to know about ‘this’ is when an object is created using a constructor aka making an instance of a class. These are usually designated with an uppercase ClassName and have the word ‘new’ before it (like below). A new context is created for each invocation, and the value of ‘this’ is the new object.

var instanceOfClass = new ClassConstructor(parameters);

Now, anytime within instanceOfClass, ‘this’ will refer to itself. This is useful for assigning properties, which is done by passing in arguments (values) to the ClassConstructor. Constructors now operate on the instance they are creating, and it’s easy to create instances and assign them properties.

When ‘this’ appears in working JavaScript code, one of the above patterns will be present. Figure out which is happening, and you’ll know what you can expect ‘this’ to refer to. 90% of the time ‘this’ refers to the object to the left of the dot at call time.

Happy coding!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s