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
, orbind
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 thewindow
object. If in strict mode ('use strict'), this will beundefined
instead of theglobal 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/