“This” keyword demystified

Hamidou Diallo
Nov 7 · 4 min read

Before we dive into the “this” keyword, I think it’s important that we first understand it’s functionality and use.

Definition:


A property of an execution context (global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

The this keyword allows you to reuse functions with different contexts. More simply, the this keyword gives you the ability to decide which object should serve as the focal point when invoking a function or method. Along with this, javascript provides 4 ways of binding “this”, which can be done implicitly, explicitly, in the window context, or through new keyword. Now that we have this out of the way, let’s dive in!

Window Context

Window binding refers to the global scope. Meaning that this will always refer to anything in its global scope. Take for example this object.

Example of Window Context

For example here, we have an object called vid. Inside of our vid object, we have title and play method. The play method is expected to output this. If we run this object, the return value is :

Now you may be asking yourself, what could this possibly be pointing to. In this case, this is returning the entire object itself. Since we aren’t binding this implicitly, explicitly, or with the new keyword, javascript assumes a window context. Since we are calling this inside the the play method, this will refer to anything outside of its local scope. Thus the whole object is returned.

Implicit Binding

Whenever a function is called by a preceding dot, the object before that dot is this. This principle is one of the most commonly used applications of the this keyword.

We have a player object, that contains a method stat_line. Running stat_line returns

You might’ve guessed that it’s referring to the points key, but why? When we invoke invoke the stat_line method, this refers the player, which contains the points key/value pair.

Explicit Binding

Aside from implicit and window binding, another way to bind this, would be to utilize the call method. The call method allows you to pass an object onto a function. The function takes the value of object and uses it as its own.

In this example, the function name, doesn’t yet contain a value of name. By using the call method, we can explicitly pass person.name, into the name function. Now, this.name is equal to Jordan

New Binding

Another way to bind this is through the use of the new keyword, which is responsible for instantiating class instances. The new keyword binds this to properties the class.

In this example, we have a class constructor User, that takes in an object as a parameter. It contains 2 class properties, name and age. If we create a new instance of User, this would bind itself to name and age respectively. Thus the return value in this case would be

Twitter

https://twitter.com/HCD124

Github

https://github.com/hamidoudiallo96

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade