Difference Between call(), apply(), and bind in Javascript

In this tutorial we will talk about three important methods in javascript which are call(), bind(), and apply(). These three methods are meant to be used in the context of objects but can be used also with normal functions so what are these methods?.

call(), bind(), and apply() control the invocation of functions just like you call a function in the normal way just like this function:

 

doSomething(param1, param2, etc.);

 

can be written in another way using call() like this:

 

doSomething.call(this, param1, param2, etc.);

 

You can use call()/apply() to invoke the function immediately. bind() returns a bound function that, when executed later, will have the correct context (“this”) for calling the original function. So bind() can be used when the function needs to be called later in certain events when it’s useful.

 

call() or Function.prototype.call()

 

So call() calls the function with (this or custom object) as the first parameter then function parameters if exist are passed one by one and returns the value of execution.

 

apply() or Function.prototype.apply()

apply() is the same as call() except that it takes the parameters as any array:

bind() or Function.prototype.bind()

The last method is bind() and it’s different than call() and apply() in that it creates a new function with a given this value, and returns that function without executing it.

 

Consider also this example:

As you see in the previous example in this code block $(“button”).click(user.clickHandler.bind(user)) will bind the user object to the clickHandler function so you can access all properties in the user object from the clickHandler function.

 

 

Share this: