There's no simple explanation for this; it is one of the most confusing concepts in JavaScript. The value of this depends on how the function is called. Some general rule of thumb are following:

If the new keyword is used when calling the function, this inside the function is a brand new object.
If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
If multiple of the above rules apply, the rule that is higher wins and will set the this value.
If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.

Read more here -- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3/

Study Guides

Top JavaScript Multiple Choice Questions (MCQ) with Answers | Frontend Interview Questions | Beginner Friendly

Top JavaScript Array Interview Questions | Problem Solving | Array Polyfills

Frontend Coding Challenges | JavaScript | ReactJS | DevKode DOM Challenge

Advanced JavaScript Interview Questions | Problem Solving | Frontend Interview Questions

Top JavaScript Promises Interview Questions | Problem Solving | Promise Polyfills

Video Tutorials

Contribution Opportunities

Grow with like-minded people,

Join the devtools.tech community

Stay in the know

YouTube

Twitter