The this keyword in JavaScript - Must Know JavaScript features every programmer should learn to master the language

The previous days I had a great conversation about the fundamentals of JavaScript, scope, closure, etc.. The this keyword was also a discussion point. I wasn’t 100% sure of the rules that apply to this and I wanted to refresh my memory about the possible ways to use the keyword and for each case identify the owner of this when a function is invoked.

The four, and only four rules about this

1. Using the new keyword for creating new objects. In that case the this will be bound to the new created object.

   As you can see in the following example, this binds to the object that created a new Car instance. For that reason we can have multiple objects from the same “class” (there are no classes in JavaScript) and each of these objects can have different values on their properties. An important thing to take away from this example is that we create a new property each time we use the this keyword inside the “constructor” function, and the value of this property is different for every instance the “class”.

    var Car = function (name, age) {
        this.name = name;
        this.age = age;
   
        this.printAge = function() {
            console.log("The age of the car is " + this.age);
        };
    };
   
    var car1 = new Car("first car", 4);
    var car2 = new Car("second car", 2);
   
    car1.printAge();
    car2.printAge();
   

2. Using this inside a function which is part of an object. this is bound to the object which contains the function.

   In the following example, the containing object is the person1, which also owns this and that’s why the function call will log “Christos” as the value of the name property.

    var person1 = {
        name: "Christos",
        shout: function() {
            console.log("Hello, my name is " + this.name);
        }
    }
   
    person1.shout();
   

   The following example is also 100% valid and shows us once again, that the first question that we have to ask ourselves when dealing with this, is who invoked/ called the function that contains the this.

   As you can see, even though we defined this on the global scope (read the next point) we are then binding the function to a property of an object and so the current rule applies and this is bound to its object.

    function shout() {
            console.log("Hello, my name is " + this.name);
        }
   
    var person1 = {
        name: "Christos",
        shout: shout
    }
   
    var person2 = {
        name: "Areti",
        shout: shout
    }
   
    person1.shout();
    person2.shout();
   

3. Using this inside a function which belongs to no object and calling that function.

   In that case this binds to the window object of your browser. In the following example, the shout function will log the value of the variable surname which is defined in the global scope of the browser. The age property is not defined in the global object and for this reason an undefined is going to be logged.

    var surname = "Monogios";
    function shout() {
        console.log(this.surname);
        console.log(this.age);
    }
   
    shout();
   

4. Using the call() or apply() functions to invoke another function.

   We can explicitly bind this to an object and this object is going to be used inside the executed function. The first argument of both functions is the object that we want this to be bound to. Then, apply requires an array of parameters while call takes a number of arguments individually.

Conclusion

It is frequently the case, that you try to avoid the use of this because you are not 100% sure, which object will own it during the execution time, when you use it inside a function. With the previous four simple rules, you can identify on every case the owner of this.