We would be talking today about the this keyword, the bind method and the call method. Most of you out there might be struggling to understand basically what a this keyword is, a bind method does or how to use a call method. This post would try and break it down into simpler chunks that can be easily assimilated.
The this keyword
So what is the this keyword?
The this keyword is a four lettered word in JavaScript with a value that represents the environment(object) in which code(functions) runs or makes reference to. You can use it to replace the name of the object in which a method runs. Let’s take some examples:-
If you look at the code above you would notice that both display1 and display2 returned the same information i.e “My name is John”. The this of the two functions is the name of the object the function was called from which is “obj“
The question that might pop up in your head is ” Isn’t using the object name same with using the this keyword?
Well, you are almost correct. The this keyword can be used to substitute for the name of an object being referenced to in a function. For instance, a function might return “this.name”.
Before I continue please note that a method is a function in an object.
if the function is a method of an object you defined, then the this keyword would be synonymous with the name of the object. But when you don’t define the object and define the function globally (ie not nested within a function or an object you defined) then the this would be the global object of your environment (ie the window object).
Using the this attaches some benefit in making reference to an object. And one of them is the fact that using the this keyword is dynamic.
I would outline an example below with additional words that you might have seen before or not. But the example would elaborate on what makes the this keyword dynamic. Take a look at the example below.
Looking at the example above you would discover that they are new syntax but don’t be scared we would discuss them.
From the object above you can see that the object, has just one method that is called total. And in the total method, we can locate the this keyword there. So now comes the question how do we attach a this(an object of reference) to the function?
Well, that’s a nice question. But the good thing about using this is that this is dynamic and not static. What I mean is that you can change the this(an object of reference) in a method using some other methods like bind, call and even apply.
The methods apply and bind can be used to achieve the same purpose but they are slightly different. The use of this makes changing of an object of reference to be easy and if a direct reference to the object in question is used instead of a this keyword then you would get the same answer even when you try to change the this in a method call to another object. For instance, take a look at the code below.
Now lets take a look at how to use bind and call
The Bind Method
The bind method is used to create a function with a preset this value so that when called you don’t need to set the this again. Okay lets take an example:
In this code you can see that newObj was assigned “obj.display1.bind(obj). When newObj is printed using console.log, it outputs a function that is bound to a this of “obj”.
When it is called it returns ” My name is John”
One unique characteristic of the bind method is that it can only set the this once and if called again after the initial binding it still sticks with the same initial binding. The example below would explain that.
In the code, the this of “newObj1” is bound to “obj” and when “newObj2” tries to bind newObj1 to “newObj” , the command to do that is ignored so when “newObj2” is called, it returns the same value as “newObj1”.
Okay, one other thing about the bind method is that it also accepts arguments that are used by the function. But the arguments can only be set after the this has been set.
The example below would explain that
The code above is a snippet that calculates the final price of a product that cost 100 units after the discount price has been subtracted.
if you take a look at the “converter.total” method you would discover that it has a parameter called “discount” which is to be used in the final formula.
After the totalPrice variable is assigned to “converter.total”, the bind is set to the converter object before the argument “10” is passed in.
The Call method
The call method performs almost the same function as the bind method. The main difference is that the call method makes a method call immediately while a bind method returns a function with a set this that is to be used to make a method call. The call method also accepts arguments which are made after the this has been set.
Now, let us take a look at some examples and see the differences between using a bind and a call method.
In the example above you would see that the bindExample variable is assigned to “converter.total” method.
Using console.log a call is made using the bind method and a function is returned. Since the returned function is native, it can’t be accessed and the returned native function also has a this value already set. So when the returned function is called it returns the value of the initial method set with reference to the this.
When the call method is used, it didn’t have to return a function before being called again. Rather it processed the initial method directly using the specified this.
Hope this article has helped in giving you an insight into the use of this, bind and call.
Thank you and please feel free to comment and share your ideas.
