Javascript ‘This’. Who Is This?

Most of the JS developers out there might have come across one of JavaScript’s most confusing topic: THIS

So, who the hell is this? 🤔

Technically, JavaScript this refers to the object that the function belongs to. And the value of this depends on how the function is called, something known as runtime binding.

In layman’s terms, this points to the owner of the function call, I repeat, the function call, and NOT the function itself. The same function can have different owners in different scenarios.

4 rules decide the value of this

1. Default binding | Direct invocation

this in Default Binding points to the global object. Default binding is applied for standalone functions and is the fallback option for all other types.

2. Implicit binding | Method invocation

Implicit Binding is applied when you invoke a function in an Object using the dot notation. this in such scenarios will point to the object using which the function was invoked. Or simply the object on the left side of the dot.

2.a Nested Function

When a function is nested inside a method of an object, the context of the inner function depends only on its invocation type and not on the outer function’s context.

In this example, even though outer was called using implicit binding, inner was called using default binding. Hence, this points to the Window Object.

2.b Method separated from the object

When we copy an object method to a new variable, we are creating a reference to the function.

In this example, newFunction directly refers to myFunction.

3. Explicit binding | Indirect invocation

In this method, you can force a function to use a certain object as its this. Explicit Binding can be applied using call(), apply(), and bind().

call(): Pass in the required object as the first parameter during the function call. The actual parameters are passed after the object.

apply(): Similar to call() with a difference in the way the actual arguments are passed. Here, the actual arguments are passed as an array.

bind(): In this method, you create a new function with a fixed this. These types of functions created using bind() are commonly known as bound functions.

4. New binding | Constructor invocation

New binding is applied when we create an object using Function Constructors.

4.a Function without Return

When we invoke a function using the new operator, internally the following steps are done:

1. The constructor function is invoked and an object is internally created, inheriting the prototype of the constructor function used.
2. The properties and functions are added to this object as per the function definition.
3. This newly created object is returned and is assigned to the LHS variable at the functional call.

4.b Function with Return

The returned object is assigned to the LHS variable at the function call and the prototype of the constructor function is NOT inherited.

Arrow Functions

Normal functions in JS abide by the 4 rules mentioned above. But ES6 introduces a special kind of function that does not use these rules, known as arrow functions.

Arrow functions use “lexical scoping” to figure out what the value of this should be. Lexical scoping is a fancy way of saying it uses “this” from the outer function in which it is defined.

Simply put, when an arrow function is invoked, JS literally takes the this value from the outer function where the arrow function is declared. I repeat, the outer function, NOT the outer object in which it is defined.

a. If the outer function is a normal function, this depends upon the type of binding of the outer function.

b. If the outer function is an arrow function, JS again checks for the next outer function and this process continues till the global object.

Note: None of the binding rules has any Direct Effect on arrow functions.

Conclusion

1. The this value in a function depends on how the function is called.
2. Default Binding: Window Object
3. Implicit Binding: Object on the LHS of dot notation.
4. Explicit Binding: Object passed as first parameter in call(), apply(), bind().
5. New Binding: The LHS object in the function call will be referred to as this in the function.
6. Arrow functions simply use the this value from its surroundings.

Note

All the examples provided above are executed in the browser environment without strict mode. If these examples are executed in strict mode or in a NodeJS env, you will receive undefined instead of the Window object.