‘this’ Keyword in JavaScript Explained

One of the most confusing things that people find when learning Javascript is the "this" keyword. So let’s understand all about it in this article.

First, let us understand what does "this" refer to?

"this" refers to the object that is executing the current function or current bit of code.

This statement would be more evident when we go through the different cases.

1. Global Context:

So when we define this in the global context, this refers to what we call as a global object. For Vanilla or plain javascript, i.e. the Browser, it is the window, and for Node.js it is global.

2. Function Invocation:

When the this keyword is inside any function, its value depends on how the function is called. When simply calling a function, this is set to the global object.

However, in strict mode mode value of this is not set to global object and is undefined .

What is "use strict" ?
It is used to enable strict mode which is used to prevent certain actions from being taken and throws exception.

3. Function as a method:

What is a method?
When the function is a property of an object it is called a method.

In this case this refers to the object that owns the method.

However, if thisis used inside a nested function (function inside a function), it then refers to the global context. In the example given below this points to the global object which does not have any property name so my.name gives undefined .

One way to fix this is by storing the value of this in another variable.

4. Inside Constructor functions:

A constructor function is created using the new keyword.

So, how does it actually work?

• The new keyword creates an empty object.
• The this keyword points to this newly created object.

5. Inside Classes:

Inside a class, this points to the current object.

However, when using nested functions the behaviour is the same as that of a regular function.

Although there is a big difference. The code inside classes is automatically executed in “strict mode”. So, the this keyword is undefined instead of pointing to the global object.

6. Inside arrow functions:

What are arrow functions?
Arrow functions were introduced in ES6. They provide an alternative to traditional functions and are more concise and clean.

In an arrow function, this points to the enclosing functions. It therefore also solves the problem we faced above while writing nested functions.

7. Explicit binding:

All the cases above were of implicit binding.

Explicit binding occurs when .call() , .apply() or .bind() is used.

.call() and .apply() are quite similar to each other. So, we gonna study them together. And then we will study about .bind() .

(a) .call() and .apply()

Both .call() and .apply() allow invoking a function with the value of this specified as a parameter and we also provide arguments that are to be passed on to the function. The only difference is that for .call() we directly pass arguments, whereas in .apply() we pass arguments as an array.

(b) .bind()

.bind() is actually different. Unlike .call() and .apply() , .bind() does not immediately invoke the function. It creates a new function with this bound to the value provided.