In most cases, the value of is determined by how a function is called. It can’t be set by assignment during execution, and it may be different each time the function is called. You can change context through , and Value of is equal to the value of the object which invokes the function. is not assigned a value until an object invokes the function where is defined. this this .call() .apply() .bind(). this this this Global Context When functions are executed in the global scope, value of is object. This is because when we call a function in global scope by default they are invoked on the Window object. In strict mode, value of in the global context will be undefined. Consider the below example: this window this As an object method When a function is called as a method of an object, it’s is set to the . this object the method is called on Example: In the above example, we have defined two variables, one in the global scope with value and another inside object with value . val 37 myObj 10 When we call as was called by object, value of inside will become equal to myObj.someFunction(), someFunction() myObj this someFunction myObj. Hence, inside when we do , it outputs variable value i.e 10. someFunction console.log(this.val) myObj’s val When we do we get value 37 as global value for is 37. window.val, val Another example: In the above example, we have defined outside object. someFunction myObj First we call on object, hence inside value of is equal to object. someFunction() myObj someFunction this myObj In second case, we have called in the global scope which is same as writing . Here, as has been called on object, value of is equal to object. someFunction() window.someFunction() someFunction() window this window First we call in the context of . Later we called the function in the global context and the value of inside the changed accordingly. This shows that the value of was determined dynamically on the basis of execution context. someFunction() myObj this someFunction() this As a constructor When a function is used as a constructor (with the new keyword), its is bound to the new object being constructed. To understand what constructor function are, please go through . this this article Here, we have defined ConstructorFunc to create new objects. When is executed, value of will be equal to the new object that is created. var obj1 = new ConstructorFunction(20) this ‘this’ in Immediately Invoked Function expression (IIFE) In , value of is always equal to Window object. Let’s see an example: IIFE this Console Output: First example: In the first example, , value of inside IIFE will be object. IIFE outside any function this Window Second Example: In the second example, when we have called inside still the value of is object not object. IIFE someFunc this Window obj This is because, value of inside a function is equal to the object on which it is called. is called on , hence value of inside is . But, is self-invoked, it has not been called by any object. Hence, the value of inside is object. this someFunc obj this someFunc obj IIFE this IIFE Window Event handler in JavaScript Inside event handler, value of is equal to the element on which the event is fired. Let’s see this with an example of click event. this In the above example, we have added an on the element which calls the function. on click event handler div clickMe When we click on the , from the above console output we can see that value of is equal to the element which we clicked. div this div We can change the value of at run time using and function. We will discuss call, apply and bind in another article. this call, apply bind Other articles An Extensive Guide To Progressive Web Applications Let’s get this ‘this’ once and for all Service Workers Service Workers implementation Virtual DOM in ReactJS Execution Context in JavaScript Prototypes in JavaScript Inheritance in JavaScript Create objects in JavaScript Objects in JavaScript
