this,Call, Apply and Bind — Part 1

There are already a million posts on this topic but it still manages to confuse the hell out of every JS beginner. All the three functions are used to handle the value of “this” explicitly and a lot of articles often skip on explaining “this” for whatever reasons. So, I would like to explain the concept behind call, apply and bind by first explaining what “this” means in Javascript. I want to break down things to the minute details possible and at the same time do not want to bore you by making the article too long, so, I am dividing the post into two articles. The first one would explain “this” and the second one will explain Call, Bind and Apply. Try to code as you go along and I will try my best to breakdown the concepts for you.

So, what is “this”?

“this” is an object whose value differs based upon where it is being used in the code. In the global context “this” refers to the window object that JS provides, and inside a function “this” acts a little strange and it’s value depends upon how the function is being invoked or called. Lets see what it means to be in both the contexts.

In a Global Context :

console.log(this); // Window Object

When you try running the above code inside your console you will see the window object, which the browser makes available in the global space. So, “this” in a global context is equal to the window object.

var a = 10;
console.log(a); // returns 10
console.log(this.a); // returns 10

The above code is not too much of a surprise, right? This kind of behavior makes sense because every variable declared in a global space gets attached to your window object, and since “this” is equal to the window object in this case, the value of “a” is equal to “this.a”. Now lets dive a little deeper and start exploring how “this” behaves inside a function.

Inside a function :

Whenever it comes to “this” inside a function it depends largely on one golden rule : “this inside a function refers to what invokes that function”.

function checkThis() {
   console.log(this) // Prints the window object once again
}
checkThis();

In the above case, a function is called without any object acting upon it(we will see the other way below) and when ever it is called in such a way “this” refers to the window object.

Chant the golden rule at least ten times while I explain other things in detail with a few examples below.

var testObject = {
    a : 1,
    whatsThis : function(){
        console.log(this.a) // Prints 1
    }
}
testObject.whatsThis()

Let’s chant our golden rule for the 11th time and look at how whatsThis function is invoked with the testObject above. In such cases when a object invokes a function “this” refers to the testObject where “a=1” and hence prints out 1. And since everything in javascript is an object testObject can be an array or a string. Pretty straight right?

var a = 2
var testObject = {
    a:1,
    whatsThis : function(){
        console.log(this.a)
        function b () {
            console.log(this.a)
        }
        b()
    }
}
testObject.whatsThis()

I want you to take a break and predict the value of “a” at both the places. If you guessed it wrong and felt the billions of blistering barnacles, calm down and chant the Golden rule once again. Look at how the both the functions are called once again. The functions whatsThis is invoked by the testObject acting upon it and hence “this” inside whatsThis refers to testObject. Although the function b() is invoked inside of whatsThis since no object is acting upon it to invoke it “this” inside function b() refers to the Window object.

In order to sum up everything the value of “this” inside a function depends upon how a function is invoked. If a function is invoked without an object “this” is set to the Window object and if a function is invoked by an object “this” refers to the object that invokes the function.

Just One more thing.

Although we’re done studying how “this” works here is one common pitfall I want to cite about before we move onto call, bind and apply. Look through the code below, venture a guess, try running the code to see what happens, experience the thundering typhoons!

var a = 2
var testObject = {
    a:1,
    whatsThis : function(){
        console.log(this.a) 
        function b () {
            console.log(this.a) 
        }
        b()
    }
}
var justOneMoreThing = testObject.whatsThis;
justOneMoreThing();

The value of “a” in both the cases will be equal to 2 here, because when you write ‘var justOneMoreThing = testObject.checkThis’ you are just assigning the function to the variable and it is invoked without any object and hence “this” refers to the window object. At this point, I don’t think it hurts to repeat the golden rule once again.

Ahoy!!! I want to wrap up everything about ‘this’ and explain about call, bind and apply in the next article. If you think learning javascript is infuriating, Congratulations! You’re on the right path and it’s just a matter of time before you master it.

I hope I helped you understand how “this” works. Please share and recommend the article if you liked it. This is my first post on Medium and I only took up writing because I think that helps me understand things better. So, if you think this can be explained better or find any mistakes please comment down below.