Consider the following piece of code:
Now let’s try to understand this code a bit. I’ve declared a global function named sayHello at line 1. I’ve then created a class named Greet and declared a function with the same name again. But this time the function is inside the class. I’ve then defined another function called sayClassHello(), which simply calls this.sayHello(). And one more function sayOuterHello() which calls sayHello() directly. With no priop knowledge, what should you think the output of the above code be?
The output would be:
This is because, when I called greet.sayClassHello(), the function calls this.sayHello(), that is, the sayHello() function residing inside the class. It’s because at this scope, this refers to the object of the class Greet. So when I invoked this.sayHello(), here this refers to the ‘greet‘ object we created from class Greet.
On the other hand, when I called greet.sayOuterHello(), the function just calls sayHello() without any object accessor such as this. Thus, ‘Outer hello!’ is printed.
Now to get a deeper understanding, here’s another example.
Here’s a piece of code I’ve written:
I’ve simply defined a class named Animal with a setter named setColor and a getter named getColor. Later, I’ve created a instance of the class by the name dog. Looking at the code, what do you think should be the output?
The output would be ‘Brown’, that’s it. This is because when I call the dog.getColor() method, it’s going to print this.color, that is, dog.color, which I’ve already set on line 12.
Now, consider the above class as is, but I’m changing how we’re initialising the objects:
So what difference did I make? Instead of getting the color using the dog object, I’ve mapped the function dog.getColor() to another instance called colorGetter. Now, if I invoke the function colorGetter(), would I still get ‘Brown’? The answer is no. And here’s why: We cannot directly get a class based function to work independently of objects without an accessor. That is, the moment we create a direct instance of the function inside a class, a reference to the actual object is not created. At this point, this is actually undefined. So, you’re going to see an error that looks like:
To solve this problem caused by undefined this, we can bind the getColor() function to the class using a constructor as follows:
Now, the fixed code should look something like this, and you’d again get the result ‘Brown’: