Explicit binding
We can explicitly assign the value of this to a specific object for a function call to remedy the inadvertent loss of this with implicit binding or when we want to call a function that is outside of the object's execution context. This is called explicit binding.
Explicit binding methods -
- Call
- Apply
- Bind
Call
The context with which the function must be called will be supplied as an argument to the call() method. Let's look at an example to see how it works:
const getName = function() {
console.log(this.name);
}
const user = {
name: 'Aniket'
};
getName.call(user); // Aniket
A function called getName is called using the call() method. So, this.name is just logged by the getName() function. But what exactly is this? The object that has been supplied to the call() method determines this.
Because we gave the user object as a parameter to the call() method, this will bind to it. As a result, this.name should log the value of the user object's name property, which is Aniket.
We only gave one argument to call() in the preceding example. However, we can send many arguments to call(), such as this:
const getName = function(hobby1, hobby2) {
console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2);
}
const user = {
name: 'Aniket'
};
const hobbies = ['Travelling', 'Blogging'];
getName.call(user, hobbies[0], hobbies[1]); // Aniket likes Travelling, Blogging
The call() method has been supplied multiple parameters in this case. The object context with which the function must be called must be the first argument. Other arguments could just be input values.
When using call(), the arguments must be passed one by one, which is not a very efficient method! This is when apply() is used.
Apply
apply() works in the same way as call() but allows you to pass parameters more easily.
const getName = function(hobby1, hobby2) {
console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2);
}
const user = {
name: 'Aniket'
};
const hobbies = ['Travelling', 'Blogging'];
getName.call(user, hobbies); // Aniket likes Travelling, Blogging
Note - Use call() when there is only one value argument or no value arguments to pass. Use apply() when you have numerous value parameters to pass.
Bind
bind() is similar to call() with only one difference. Unlike the call() method, which immediately calls the function, bind() returns a new function that we can use instead.
const getName = function(hobby1, hobby2) {
console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2);
}
const user = {
name: 'Aniket'
};
const hobbies = ['Travelling', 'Blogging'];
const getNameFunc = getName.bind(user, hobbies[0], hobbies[1]);
getNameFunc(); // Aniket likes Travelling, Blogging
The function getName() is not directly invoked by getName.bind() in this case. It returns a new function called getNameFunc(), which we can invoke later.
Wrapping Up
- Explicit binding and the methods - call, apply and bind.
- Explanation of call, apply and bind with examples.
- Call vs apply and call vs bind.
Thanks for reading!! Give some reactions if you liked it. If you want to say something about the topic or give some feedback, write it down in the comments. Wanna connect with me or see my projects? Here's my portfolio link.