JavaScript - Understanding "this" with respect to different types of function invocation

In this article, I will explain how this context is set. This context mostly depends on how the function is invoked rather than where it is defined. Function in javascript can be invoked in different ways. We will be taking it one by one and understand this context.

1. Direct Function Invocation

The above type of invocation is called direct function invocation. In this case, the value of this corresponds to the global object. In case, we are using 'use strict', then it will behave differently as shown below

In the 'use strict' mode, the value of this will be undefined.

1. Method Invocation

   When the function is invoked as a property of an object. It is called method invocation

In this case, this corresponds to the obj object itself. It will only be true when directly invoking the method on the object.

Suppose, we are saving the function reference in some other variable and then invoking that function reference. In that case, this will correspond to the scope in which the reference was created.

As greetFn was created in global scope, this will correspond to the window object.

we can also explicitly bind this with the obj object.

Here we are using bind to set the context of this as obj . So even though, we are invoking the function reference, the value of this will always correspond to obj object.

1. Constructor Function

   When we invoke a function with the new keyword, it is called the Constructor Function. In this case, the value of this is an empty object.

Every invocation will create a new instance of the greet function.

1. Indirect Invocation

   We call the function by explicitly setting this context using call and apply methods. This is called indirect invocation.

   

   Here we are explicitly passing the context as obj upon function invocation using the call method. The first argument to call method is the object you want to bind to this inside the function. The remaining parameters are taken as arguments by the function. Here we are passing only one parameter "hello". We can pass more parameters.

   We can achieve the same with apply method as well. The only difference between the apply method and call method is that, in apply method the function parameters are passed as an array of comma separated values, while in the call they are just passed as comma separated values(not as an array). Below is how we can use apply method. This time I am passing two arguments to function.

2. 

   Bound Function

   Using apply and call method, functions are invoked instantly with the specific context. But If we just want to set the context of the function and invoke it later in the code. This can be achieved using the bind method and such a function is called the bound function.

   

3. Arrow function

   In this case, this is determined from the lexical scope**.**

   Can you guess the value of this in innergreet function.

   

   The value of this inside greet Function will be the object itself, as we have discussed earlier in method invocation, this is determined by the object on which the function is invoked.

   But when it comes to the innergreet function, if you observe, you can find that type of invocation is Direct Function invocation. As we have discussed , this is determined by how the function is invoked rather than where it is called. Since it is a function invocation, the value this will be window object.

Now, if we want the innergreet function this to resolve to parent this, it can be solved using the arrow function, as in arrow function ,this resolves to the outer function this.

this issue can also be solved by explicitly binding the context.

Conclusion

Hope, this article helped you to understand how this works in javascript. Happy reading :-)