Skip to content
Related Articles

Related Articles

JavaScript | this Identifier

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 30 Jul, 2019
View Discussion
Improve Article
Save Article

In JavaScript, ‘this’ identifier can be used in different contexts and scopes. Let us go through each to determine what this is and how it is decided.

Global Scope

Whenever ‘this’ keyword is used in the global context i.e. not as a member of function or object declaration, it always refers to the Global object. The following example will illustrate this behavior.

// Declaring variable in global context.
var a = "GFG";
// Using this we refer to the Global Context.
// And update the value of a we declared previously.
this.a = "GeeksforGeeks";



Functional Scope

If a function has a ‘this’ reference inside it, it can be said that the this refers to an object, not the function itself( which is generally the most common mistake programmers make ).
To determine which object the ‘this’ points to depends on how the function was called in the first place. The following example will put some light on the case.

// Function that contains this.
function myFunc() {
  console.log( this.a );
var a = "Global";
// Owner of the function.
var myObj1 = {
  a: "myObj1",
  myFunc: myFunc
// Object other than the owner.
var myObj2 = {
  a: "myObj2"
// Call the function in Global Scope.
// Call the function from the reference of owner. 
// Call the function from the reference
// of object other than the owner. myObj2 );
// Create a new undefined object.
new myFunc();



Seeing the above example, we can see four different ways we can determine what this points to. There are four rules for how this gets set, let us explain these four for ourselves.

  • In the first call, myFunc() ends up setting this to the Global object in non-strict mode. Whereas, in strict mode this would be undefined and JavaScript will throw an error in accessing the property.
  • myObj1.myFunc() sets this to the myObj1 object, here myObj1 is the owner of the Function myFunc and we are calling the function with the reference of the object itself, Thus in such cases this will refer to the owner object.
  • sets this to the myObj2 object. This proves that this doesn’t always point to the owner object, it rather points to the object under whose scope the function was called.
  • new myFunc() sets this to a brand new empty object thus we get undefined in the console log.

Note: We can determine whom ‘this’ refers by following this simple technique. Whenever a function containing ‘this’ is called, we should look at the immediate left of the parentheses pair “()”. If on the left side of the parentheses there is a reference, then “this” refers to the object it belongs to, otherwise, it refers to the global object. Provided we haven’t used any special Function to invoke the Function.

Inside an Event Handler

‘this’ inside of an event handler always refers to the element it was triggered on. Let us see an example to illustrate the same.

<div id="clickMe">Welcome to GFG!</div>
function clickedMe() { 
clickedMe(); // undefined because global object. 
var myElem = document.getElementById('clickMe'); 
myElem.onclick = clickedMe; 
myElem.onclick(); // Welcome to GFG!


Welcome to GFG!

We can see here that the first call was made in the Global scope thus ‘this’ referred to the Global Object and undefined was logged. Then we have copied the function to myElem.onclick event thus whenever the onclick function is invoked, ‘this’ refers to the myElem element which is the div with id clickMe thus “Welcome to GFG!” gets logged.

Now we can say that we know how this gets set to a particular object and we have one less misconception to worry about.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!