call, bind and apply in JavaScript
Generally, we don’t use these functions in our day to day front-end development. The most common use case for these functions are when either we are doing some hardcore JS work, writing a library or working on a library/framework which needs one of the function. Example of such scenarios is ReactJS. Where in Class component we use bind
to bind the reference of this
in class instance.
So, let’s understand what is purpose these function serve?
The job of all three of the functions
call bind and apply
is same. And that is to pass on the reference ofthis
to the caller function with some slight sprinkle of variation.
Let’s understand the above definition with an example. Consider below code:
In above code, inside mystryFunction
the reference of this
will always point to window
object. Now what if we want to utilize the mystryFunction
and want to change the reference
of this
inside it.
We can do this by utilizing any of the three methods.
Call and Apply
Difference b.w. Call and Apply
call and apply do same thing. Bind the reference of passed object to the function.
The only difference is how they handle parameters. Call accepts comma separated parameters while apply accepts array of parameters.
Let’s see this by and example.
Bind
bind
also does the same thing. The only difference is that, it returns a new function after adding the passed reference to it, instead of immediate calling it.
Bind receives arguments as a comma separated values.