In JavaScript objects have their own properties and methods. With every function we have three methods: call(), apply() and bind().
Before moving into this concept, first lets have a recap on this in functions. This keyword determines how a function is called (runtime binding).
There is a feature in JavaScript which allows to use the methods of some other objects to another object without redefining them. This way of borrowing is done through call(), apply(), bind() methods.
Call(), apply(), and bind() methods are used to set the this keyword independent of function call. Useful in callbacks.
Call():
Call method sets the this inside function and immediately executes the function. Here you can pass arguments as a list.
Syntax:
function.call(thisArg, arg1, arg2, …)
function – function that needs to be invoked with different this object.
thisArg – value that needs to be replaced with this keyword present inside this function.
arg1,arg2,… – arguments passed for invoking function with this.
Example:
function test(arg1, arg2){
console.log(this.num, arg1, arg2); // 100, 10, 20
}
test.call({num: 100}, 10, 20);
Output:
100,10,20
apply()
apply() method binds the this value to the function and executes the function. Here you can pass argument as an array.
Syntax:
function.apply(this, [argumentsArray])
It returns the result of the function which is invoked by this.
function test(...args){
console.log(this.num, args);//100, [1,2,3]
}
test.apply({num: 100}, [1,2,3]);
Output:
100, [1,2,3]
Bind()
Bind() function binds this value to the function and returns new function. We need to invoke the returned function separately.
Syntax:
function.bind(this,arg1,arg2,arg3,...)
Bind returns a copy of function with this and arguments.
function test(arg){
console.log(this.number, arg);
}
let bindedFn = test.bind({number: 1}, "Abaython");
bindedFn();Output:
1 Abaython
Differences : call() vs apply() vs bind()
| call() | apply() | bind() | |
| Definition | Call method is a predefined javascript method. With call an object can use a method belonging to another object. Here we supply list of arguments | Similar to call(). But here we supply array of arguments | Bind() helps in creating another function and execute later with new this function |
| Execution | At time of binding | At time of binding | At time when we execute the return function |
| Return? | Yes it returns and calls the same function at time of binding | Yes it returns and calls the same function at time of binding | Yes it returns a new function of copy of function which can be used later. |
| Parameter | List of arguments | Array of arguments | Array and any number of arguments |
Key points to note:
call: binds thethisvalue, invokes the function, and allows you to pass a list of arguments.apply: binds thethisvalue, invokes the function, and allows you to pass arguments as an array.bind: binds thethisvalue, returns a new function, and allows you to pass in a list of arguments.