In this article, we will learn how "this" keyword actually works, how the value of "this" object is helpful in different situations.
But, before diving more deeply about "this" object, we need to know the fundamentals of how the browser executes js code.
Understanding Execution Context
Global context: In this environment, your code is run for the first time.
Function context: It is applicable whenever the flow of execution enters a function body.
Internal context: Text that will be executed inside the internal eval function falls under this scope.
When a function is called it creates a private scope, in which anything declared inside of the function can not be directly accessed from outside the current function scope.
But, a function can easily access a variable that is declared outside of its current context. This is the fundamental concept of the execution context.
Now, you have a clear concept on execution context, let's discuss how "this" object plays its role in it.
The execution context is changed depending on the item that is present at the top of this stack. The object that "this" refers to changes every time when the execution context is changed.
"this" object refers to the global object. Whenever a code is run as part of a function call, then "this" refers to the global object.
The keyword has different meanings and these depend on exactly where "this" keyword is used.
It refers to the global object that is global if is called in a Node Js environment and it belongs to the window object if it is executed in the browser environment.
At the time when a function is executed as a property of an object, then "this" refers to the parent object.
When a function is called with the "new" operator, then "this" refers to the newly created instance.
When a function is executed with apply and call method then at that time "this" refers to the value passed as the first parameter of apply or call method.
Let's discuss these use cases one by one.
In IIFE(Immediately Invoked Function Expression) :
If you don't know what is IIFE, you can know more about it here. If "use strict" option is turned on, then the value of "this" will be undefined. Also, the global object refers to undefined in case of the window object.
Refers To a Current Instance
Refers To Parent Object
In the above code snippet, when user.showMessge() method of user instance is called, "this" keyword refers to the user object instead of the global object. That's why it displayed "false" as output.
But, when only showMessage() method is called, "this" keyword refers to the global object. So, that time "true" is displayed. At the time when fun1() is called, it displayed "true" as it was treated as a normal function.
Uses With call() and apply() Methods
The main difference between call and apply method is that call() function expects parameters to be passed individually, where apply() function expects them to be passed as an array of parameters.