Site Navigation

Post navigation

Four Rules to Define this in JavaScript

Posted: July 10, 2015 Updated: May 21, 2018

Understanding how this works in JavaScript is fairly simple. Knowing what this points to however… that is much more difficult. Scope and context become important concepts to understand. Knowing exactly what this points to and why within each function/method in your JavaScript code can be utterly confusing. Hopefully the rules and corresponding examples below provide clarity on this.

TL;DR — The four rules presented for determining what this in JavaScript points to boil down to one simple question: What is the calling object?

Precedence of the four rules:(The JavaScript interpreter will ask in this order)

Is the function called by new?

Is the function called by call(), apply(), or bind()?

Is the function called as a method, ie: obj.func()?

Is the function called in the global scope?

If strict mode is enabled, return undefined.

Otherwise, return the global object, ie: window.

In JavaScript functions don’t know where they live. They only know how they are called.

Whenever a function is contained in the global scope, the value of this inside of that function will be the window object.

Functions within the global scope are in fact methods on the window object. So, calling greetMe('john'); is no different than calling window.greetMe('john'); Therefore, this inside of the greetMe function points to window.

Whenever a function is called by a preceding dot, the object before that dot is this.

This example is similar to what we saw above with window.greetMe. Here, instead of window we have the greetMe object on the left of the dot. Therefore, this inside of the speak method points to greetMe.

While this example appears to break rule 2, it doesn’t because it actually applies to rule 1. In this example, we establish two global variables: greeting and greet. Remember, since these variables are declared in the global scope, they are actually just properties on the window object. Therefore, when greet is called, while it points to the greetMe.speak method, it is executed in the context of the window object. It would be as if you executed window.greet('John');. Therefore, this inside of the greet function points to window.

Whenever a constructor function is used, this refers to the specific instance of the object that is created and returned by the constructor function.

In the example above, both the greetJohn and greetJane variables are assigned a unique object returned by the GreetMe constructor function. Therefore, this inside of the speak method points to the unique GreetMe object instance stored in the variable on which the speak method is being called. This is evident by looking at the name property on the GreetMe object.

The new keyword in JavaScript makes a standard function in to a constructor function. It does several other things as well, detailed at the top of my post on object oriented JavaScript patterns.

This example is similar to the previous. The difference is that instead of a method being called that exists directly on the object instance, the method is called from the constructor function’s prototype. However, the context of this does not change &dash; it still points to the unique GreetMe object stored in the variable on which the sayGoodbye method is being called.

Whenever JavaScript’s call or apply method is used, this is explicitly defined.

JavaScript’s call and apply methods allow you to execute a function in a different context. The first argument passed to either of these methods explicitly sets what this points to. Because call and apply are explicit, they present the clearest case of what this points to. This is evident by looking at the name property logged to the console by each invocation of the sayGoodbye method.