Introduction:

The This keyword has always been a confusing topic among newbies getting into the world of JS. The source of confusion may be the way 'this' behaves in JS is considered different from other programming languages like C++,Java,etc.

'this' in JS is nothing but a pointer variable whose value changes with respect to the context where it has been lexically called.

The value of 'this' is determined through two ways:

• Implicit Binding
• Explicit Binding

Implicit Binding:

Implicit Binding refers to JS engine implicity determining the value of 'this' based on the lexical environment.

Explicit Binding:

Explicit Binding refers to when user gets to determine the value of 'this' by providing the context to a function in which 'this' is called.

How We Can Achieve Explicit Binding:

Throught These Methods:

• Call
• Apply
• Bind

This in Global Scope:

The value of 'this' in global scope evaluates to the 'Global Object' which happens to be 'window object' in terms of vanilla JS. (Note: The Global Object tends to differ depending where JS is being run may be inside browser, on server,etc.)

Example:

Output:

This Inside Function:

The value of 'this' inside a function declaration or function expression happens to be the 'Global Object'. But the value of 'this' inside an arrow function is determined base on the lexical scope.

Example:

Output:

This Inside Object Methods:

The value of 'this' inside an 'Object Method' happens to be the 'Object' itself. But if the method happens to be an arrow function then the value of 'this' will be determined based on the lexical scope.

Example:

Output:

This With Constructor Methods:

The value 'this' inside a 'Constructor Method' will be determined by a call from newly created instance object. The value of 'this' in constructor method refers to the 'instance object' that calls the constructor method.

Example:

Output:

This With Call:

• Call provides us with a way to determine the value of 'this' by passing context and arguments to the function seperated by commas.
• The function in the case gets called by 'Call' method after context and arguments are supplied.

Example:

Without Parameters:

Output:

With Parameters:

Output:

This With Apply:

• Apply allows us to determine the value of 'this' by passing context and arguments to the function as as single dimesion array.
• The function in the case gets called by 'Call' method after context and arguments are supplied.

Example:

Output:

This With Bind:

• Bind allows us to determine the value of 'this' by passing context and arguments to the function as as single dimesion array.

• Bind instead of calling the function, returns a newer copy of that function with the updated context as provided which later be reused.

Example:

Calling Returned Function Without Parameters:

Output:

Calling Returned Function With Parameters:

Output:

• This With Weak Reference:

If a reference of an Object Method is stored inside a variable and that Object Method has 'this' inside it. The value of 'this' is not gonna be the Object inside which the method is instead the value of 'this' is going to get determined based on it's lexical environment.

Example:

Output:

The above example shows how the refernce of 'this' changes and it's value get's changed.

Conclusion:

In this article, we tried to demestify 'this' through different examples. The value of 'this' is always determined based on the location in the code where it's getting called unless it's an arrow function. We hope we were able to provide you insights of 'this' and helping you figure out it's value.