Home » JavaScript

'this' keyword in JavaScript

JavaScript 'this' keyword: Here, we are going to learn about the 'this' keyword in JavaScript with examples.
Submitted by Siddhant Verma, on October 13, 2019

JavaScript 'this' keyword

The this keyword is widely used in JavaScript. It has many use cases and is also one of the most intimidating features of JavaScript. In most of the programming languages, this is used to refer to the current instance of an object. Let me assure you though, that by the end of this article you'll be very confident in understanding this.

Let's first get a general idea of this. Let's say you have a class Car which has three data members model, type and price. The variable names for the model, type and price are the same. If we invoke the constructor function of Car to initialize the data members with some values, we can use this to refer to the current instance of Car. We can do something like this,

class Car {
    var model, type, price;
  
    Car(model, type, price) {
        this - > model = model;
        this - > type = type;
        this - > price = price;
    }
}

We have used this to avoid confusion between the parameters passed to the constructor function and the data members of the class Car.

This is this, in a general context. Let's explore it in JavaScript now.

this is a reserved keyword in JavaScript that does a lot more than what we saw above.

Its value is determined by the execution context.

The execution context is determined by how a function is called or invoked? So we're associating this to functions instead of classes? Yes, remember that this in JavaScript comes into existence only when a function is defined. Every time that function definition runs, we get this defined for a function.

Before explaining the execution context and how this is associated with functions, let's see this in live-action.

console.log(this);

Output

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

If you expand the window, you get a whole load of methods and properties. Every time we talk about this, we picture its scope. The scope of this is defined as what object it refers to. Since we wrote absolutely nothing above, this refers to the global or window object.

Alright, so you have three golden rules to determine the context of this. Let's look at these rules one by one,

1) The Global Rule

Unless we have this inside of an object, it will point or refer to the global object and the global object in JavaScript is the Window object. The example we saw above describes the global rule.

function Person() {
    this.person = 'Fuzzy';
    //this points to global object
}

Person();
console.log(person);

Output

Fuzzy

Person becomes a global variable as it is declared on the global object. We have this nowhere close to any kind of object whatsoever. We have a function, so this comes into existence and it looks for an object to associate its scope with. It finds no such object and attaches itself to the Window object as per the global rule.

2) Implicit Binding

Whenever we declare this inside of a declared object, the value of this becomes close to that of it's parent object.

var person = {
    name: 'Fuzzy',
    greet: function() {
        return 'Hello' + this.name;
    },
    scopeThis: function() {
        return this === person;
    }
}

person.greet();
person.scopeThis();

Output

"HelloFuzzy"
true

We have a function greet() where we use this. So this comes into existence and gets associated with the function greet(). It bubbles up to see if it is attached to any object and finds itself wrapped inside the object person. So the scope of this, in this case, is the object person according to implicit binding rule.

What will be the scope of this in the next example?

var person= {
    Name: 'Fuzzy', scopeThis: this
}

person.scopeThis;

Output

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

Did you guess the scope of this to be person? Remember, this only comes into existence when a function is associated with it. Since scopeThis is not a function, this assumes it's usual value. The implicit binding rule does not hold true and this takes the value of the global or window object using the global rule.

3) Explicit Binding

We can choose what we want the context of this to be using call(), apply() and bind(). We invoke these methods only on functions.

• call(): Takes thisArg, a, b,c,d,... as parameters and is invoked immediately.
• apply(): Takes thisArg,[a,b,c,d,...] as parameters and is invoked immediately.
• bind(): Takes thisArg,a,b,c,d, ... as parameters and is invoked after some time returns a function definition.

var person={
	Name: 'Fuzzy',
	Greet: function(){
		return 'Hello'+this.name;
},
scopeThis: function(){
		return this===person;
},
dog:{
	Bark: function(){
	return 'Barking' + this.name;
},
scopeThis: function(){
	return this===person;
}
 }
}
person.dog.scopeThis();			
person.dog.scopeThis.call(person);

Output

false
true

person.dog.scopeThis() returns false since this takes the binding of the dog object according to our Implicit Binding rule and person.dog.scopeThis().call() returns true as we're explicitly setting the value of context of this to be that of the object person.

Another example where we can use call() to also explicitly set the value of this to be anything as per our wish.

var person={
	name: 'Fuzzy',
	greet: function(){
		return 'Hello' + this.name;     
}
}
 
var dog={
	name: ' Cooper'
}
person.greet.call(dog);	

Output

"Hello Cooper"

We called greet() function, a member of the person object but returned the name of dog object using this. We explicitly bind this to an external object dog using call().

var person = {
    name: 'Fuzzy',
    greet: function() {
        setTimeout(function() {
            console.log('Hello' + this.name);
        }, 1000);
    }
}
person.greet()

Output

'Hello'

In the above example, we get the value of this to be undefined and we get the Hello undefined on the console. Can you guess why?

By the time our setTimeout() function runs, we have lost the binding of this to it's closest parent object. Hence the closest parent object of this is the global or the window object and name is not a defined property for this anymore. A workaround this would using the bind() method.

var person = {
    name: 'Fuzzy',
    greet: function() {
        setTimeout(function() {
            console.log('Hello' + this.name);
        }.bind(this), 1000);
    }
}

Output

'Hello Fuzzy'

Now we get Hello Fuzzy exactly how we wanted it.

In addition to all this, if we define an object using the new keyword we get the general meaning of this. this automatically binds itself to the current instance of the object defined using the new keyword.

Remember to use all the rules independently while checking the scope of this.

I hope this wasn't too hard(pun intended).

JavaScript Tutorial »

---