Understanding the this keyword

In JavaScript, “this” will refer to the execution context for that specific call.

What does that mean?

When we invoke a function, an execution context is created. This execution context is basically a record of information that is important to our function. It lets us know where the function was called from, the parameters that were passed etc. One of the most important properties the record saves is "this" reference which will be used during the function's execution.

But what will "this" reference?

Well, in order to determine this, we will need to find exactly where our function was called from. Once we find the location, there are some rules that are applicable.

Rules:

1. New binding

When a function is invoked with the new keyword, "this" will reference the newly created object:

2. Implicit binding

When a function is invoked with the dot notation, "this" will reference the object to the left of our dot:

3. Explicit binding

Uses call, apply and bind functions to explicitly provide value of "this". These methods allow a method that was defined for one object, to be assigned and called by another object.

Thus explicitly providing the value of "this":

The main differences between the three aforementioned methods used for explicit binding are the following:

• In order to use call, pass the object and additional parameters as strings
• In order to use apply, pass the object and additional parameters inside of an array.
• The bind function will create a new function whose ‘this’ value can be set to the value providing in the function call.

4. Default binding

Undefined in strict mode, otherwise the global object — even if used within a function:

5. Event Listeners

When using event listeners, the object being listened to will be bound to "this":

6. Lexical binding with arrow functions

Arrow functions bind this lexically. Since they don't have their own context in which they execute, "this" get inherited from the parent function: