JavaScript: bind() vs apply() and call()
Read this JavaScript tutorial and learn about the main differences between the function prototype methods: bind(), call() and apply() and their usages.
The this refers to object can be different based on whether it is global, an object, and also on the usage of the three Function prototype methods — namely bind, call, and apply.
Call
The call() method calls the function with a given this value and allows passing in arguments one by one separating them with commas:
Javascript call method
Apply
The apply() method calls the function with a given this value and allows passing in arguments as an array (or an array-like object).
JavaScript: bind() vs apply() and call()
When the first argument is undefined or null, a similar result can be achieved using the array spread syntax.
The <kbd class="highlighted">call()</kbd> and <kbd class="highlighted">apply()</kbd> methods are interchangeable. Choosing between these two is up to the situation. If it is easier to send in an array, you can use <kbd class="highlighted">apply()</kbd> or <kbd class="highlighted">call()</kbd> for a comma separated list of arguments.
Bind
The bind() method returns a new function and allows passing in a <kbd class="highlighted">this</kbd> array and any number of arguments.
Javascript bind method
Among these three methods above, <kbd class="highlighted">bind()</kbd> works a little bit differently. Unlike <kbd class="highlighted">call()</kbd> and <kbd class="highlighted">apply()</kbd> that execute the current function immediately, <kbd class="highlighted">bind()</kbd> returns a new function. You can use <kbd class="highlighted">bind()</kbd> for events like onClick where you don’t know when they will be fired but you know the desired context.