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 applyis same. And that is to pass on the reference of
thisto 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
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 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.