JavaScript apply(), call() and bind()

Suppose we have a function:

function selfGreeting() {
    console.log('Hello from ' + this.name)
}

We call that function in normal way:

selfGreeting()

Would result: Hello from

Simple, because in the context of calling, name or this.name is undefined.

Now we use call()

var person = {name: 'Bob'}

selfGreeting.call(person)

Result is: Hello from Bob

Here we pass the person variable to call(), make it becomes the context of selfGreeting function. Now in that function scope, this variable is person variable, and this.name has value Bob.

From mozilla:

The call() method calls a function with a given this value and arguments provided individually.

We can also use apply()

selfGreeting.apply(person)

Result is: Hello from Bob

In short, when we pass an object to call() or apply() to invoke a function, the this variable will be replaced by that object.

Call it later

These 2 cases above are for immediately invoke a function.
Now, we don’t want to invoke the function now, instead, pass it as a callback for others to call later, like this one:

function waitAndDo(callback) {
    setTimeout(function () {
        callback();
    }, 1000)
}

waitAndDo(selfGreeting)

Of course it will wait 1000ms and print: Hello from
this.name is still undefined.

Fixing it: we can rewrite code to use call() or apply() methods to pass our context.

function waitAndDo(callback, context) {
    setTimeout(function () {
        callback.call(context)
    }, 1000)
}

var person = {name: 'Bob'}

waitAndDo(selfGreeting, person)

Result is: Hello from Bob

Or we can use bind() method for more elegant

function waitAndDo(callback) {
    setTimeout(callback, 1000)
}

var person = {name: 'Bob'}

// Use bind() to create new function and attach context to it
var newFunction = selfGreeting.bind(person)

waitAndDo(newFunction)

Result is: Hello from Bob

Summary

• Similarity: apply, call or bind are used for passing the context to function execution (replace this variable).
• apply and call are used to call function immediately.
• bind is used to create a new function with context attached. Then this new function can be passed around and called later with that context.
• You can also pass arguments other than context to apply, call and bind.
• Detail signature of apply, call and bind