Javascript – this keyword

The this keyword is one of the most widely used and yet confusing keyword in JavaScript. Here, you will learn everything about this keyword.

this points to a particular object. Now, which is that object is depends on how a function which includes ‘this’ keyword is being called.

Look at the following example and guess what the result would be?

var myVar = 100;
function WhoIsThis() {
   var myVar = 200;
   console.log(myVar); // 200
   console.log(this.myVar); // 100
}
WhoIsThis(); // inferred as window.WhoIsThis()
var obj = new WhoIsThis();
console.log(obj.myVar);

The following four rules applies to this in order to know which object is referred by this keyword.

  1. Global Scope
  2. Object’s Method
  3. call() or apply() method
  4. bind() method

Global Scope

If a function which includes ‘this’ keyword, is called from the global scope then this will point to the window object.

var myVar = 100;
function WhoIsThis() {
   var myVar = 200;

   console.log("myVar = " + myVar); // myVar = 200
   console.log("this.myVar = " + this.myVar); //this.myVar = 100
}

WhoIsThis(); // inferred as window.WhoIsThis()

So, when you create an object of a function using new keyword then this will point to that particular object. Consider the following example.

var myVar = 100;
function WhoIsThis() {
   this.myVar = 200;
}
var obj1 = new WhoIsThis();
var obj2 = new WhoIsThis();
obj2.myVar = 300;

console.log(obj1.myVar); // 200
console.log(obj2.myVar); // 300

In the above example, this points to obj1 for obj1 instance and points to obj2 for obj2 instance. In JavaScript, properties can be attached to an object dynamically using dot notation. Thus, myVar will be a property of both the instances and each will have a separate copy of myVar.

 

Now look at the following example.

var myVar = 100;
function WhoIsThis() {
   this.myVar = 200;

   this.display = function(){
       var myVar = 300;

       console.log("myVar = " + myVar); // 300
       console.log("this.myVar = " + this.myVar);  // 200
   };
}
var obj = new WhoIsThis();
obj.display();

In the above example, obj will have two properties myVar and display, where display is a function expression. So, this inside display() method points to obj when calling obj.display().

 

this behaves the same way when object created using object literal, as shown below.

var myVar = 100;
var obj = {
   myVar : 300,
   whoIsThis: function(){
       var myVar = 200;

       console.log(myVar); // 200
       console.log(this.myVar); // 300
   }
};
obj.whoIsThis();

The bind() method is usually helpful in setting up the context of this for a callback function. Consider the following example.

var myVar = 100;
function SomeFunction(callback) {
   var myVar = 200;
   callback();
}
var obj = {
   myVar: 300,
   WhoIsThis : function() {
       console.log(`'this' points to ${this} myVar = ${this.myVar}`);
   }
};

SomeFunction(obj.WhoIsThis); // 'this' refers to [object Window], myVar = 100
SomeFunction(obj.WhoIsThis.bind(obj)); // this refers to [object Object], myVar = 300

In JavaScript, a function can be invoked using () operator as well as call() and apply() method as shown below.

var person1 = {
   fullName: function() {
       return this.firstName + " " + this.lastName;
   }
}
var person2 = {
   firstName:"John",
   lastName: "Doe",
}
console.log(person1.fullName.call(person2));  // "John Doe"
console.log(person1.fullName.apply(person2));  // "John Doe"

In JavaScript, we have a arrow function. this is window in error functions. Consider the following example.

var person1 = {
   fullName: () => {
       return this.firstName + " " + this.lastName;
   }
}
var person2 = {
   firstName:"John",
   lastName: "Doe",
}
console.log(person1.fullName.call(person2));  // "undefined undefined"

 

But, if you set values in window object. Consider the following example.

window.firstName = 'This is';
window.lastName = 'window'
var person1 = {
   fullName: () => {
       return this.firstName + " " + this.lastName;
   }
}
var person2 = {
   firstName:"John",
   lastName: "Doe",
}
console.log(person1.fullName.call(person2));  // "This is window"