- Open new tab in chrome
- Right click on page and select “inspect element” from context menu
- Go to the console panel
“this” refers to global object
By default, the execution context for an execution is global which means that if a code is being executed as part of a simple function call then “this” refers to global object. “window” object is the global object in case of browser and in Node.JS environment, a special object “global” will be the value of “this”.
Immediately Invoked Function Expression (IIFE)
Note: If the strict mode is enabled for any function then the value of this will be “undefined” as in strict mode, global object refers to undefined in place of windows object.
“this” refers to new instance
When a function is invoked with “new” keyword then the function is known as constructor function and returns a new instance. In such cases, the value of “this” refers to newly created instance.
In case of person.displayName, “this” refers to new instance person and in case of person2.displayName(), “this” refers to person2 which is a different instance of Person.
“this” refers to invoker object (parent object)
In this example, we are going to use method foo defined in first example.
By above example, it is clear that how value of “this” can be confusing in some cases. The function definition of foo1 is same but when it is being called as a simple function call then “this” refers to global object and when same definition is invoked as an object’s method then this refers to the parent object. So the value of “this” depends on how a method is being invoked as well.
“this” with call, apply methods
We are going to use the second example defined above to explain the use of call:
The only difference between call and apply method is the way argument is passed. In case of apply, second argument is an array of arguments where in case of call method, arguments are passed individually.
“this” with bind method
bind method returns a new method with “this” refers to the first argument passed. We are going to use above example to explain bind method.
“this” with fat arrow function
As part of ES6, there is a new way introduced to define a function.
When a fat arrow is used then it doesn’t create a new value for “this”. “this” keeps on referring to the same object it is referring, outside the function.
Let’s look into some more examples to test our knowledge about “this”
Since the callback is invoked as a simple function call inside multiple function, “this” refers to global object windows inside execution context of callback method.
So now, you can figure out the value of “this” by following these simple rules:
- By default, “this” refers to global object which is global in case of NodeJS and windows object in case of browser
- When a method is called as a property of object, then “this” refers to the parent object
- When a function is called with “new” operator then “this” refers to the newly created instance.
- When a function is called using call and apply method then “this” refers to the value passed as first argument of call or apply method.
As you have seen above, the value of “this” can sometimes be confusing but above rules can help you to figure out the reasoning of the value of “this”.