Call, Apply, Bind in JavaScript

Definitions

Call method is used to change the context of the invoke function. In other words, to change the keyword this inside the function.

Apply method is similar to Call, the only different is that Apply method can receive an array as argument.

Bind method will return a new function - bind function. The keyword this will refer to the first argument.

Examples

Call

In below case, archer only have two properties, name and health. He want to use heal() method to manager him health for temporary. So he don't need to create a new heal function, he can use call method to borrow heal().

const wizard = {
    name: 'Merlin',
    health: 50,
    heal(){
        return this.health = 100
    }
}
const archer = {
    name :'Robin',
    health: 30
}
console.log('1', archer) // {name: 'Robin', health: 30}
wizard.heal.call(archer) // this in heal() point to archer
console.log('2', archer) // {name: 'Robin', health: 100}

const wizard = {
    name: 'Merlin',
    health: 50,
    heal(num1, num2){
        return this.health += num1 + num2
    }
}
const archer = {
    name :'Robin',
    health: 30
}
console.log('1', archer) // {name: 'Robin', health: 30}
wizard.heal.call(archer, 50, 30) // this in heal() point to archer
console.log('2', archer) // {name: 'Robin', health: 110}
wizard.heal.call(archer, 50, 30, 100) // only take the first two


wizard.heal.call(archer, 50) // if only put 1 parameter
console.log('2', archer) // {name: 'Robin', health: NaN}

Apply

Similar to Call, the only different is that receive an array as argument

const wizard = {
    name: 'Merlin',
    health: 50,
    heal(num1, num2){
        return this.health += num1 + num2
    }
}
const archer = {
    name :'Robin',
    health: 30
}
console.log('1', archer) // {name: 'Robin', health: 30}
wizard.heal.apply(archer, [50, 30]) // this in heal() point to archer
console.log('2', archer) // {name: 'Robin', health: 110}

wizard.heal.apply(archer, 50) // type error, only accept array
wizard.heal.apply(archer, [50,50,50]) // only pick the first two
wizard.heal.apply(archer, [50]) // NaN, at least 2 parameter

Bind

fun fact, archer wants to borrow a heal() from wizard, but he want to use it later on. So he can use bind method, as bind method will return a new function, he can use it whenever he wants.

const wizard = {
    name: 'Merlin',
    health: 50,
    heal(num1, num2){
        return this.health += num1 + num2
    }
}
const archer = {
    name :'Robin',
    health: 30
}
console.log('1', archer) // {name: 'Robin', health: 30}
// bind will return a function
const healArcher = wizard.heal.bind(archer, 50, 30) 
healArcher() // {name: 'Robin', health: 110}

Summary

1. call and apply are useful for borrowing methods from an object
2. bind is useful for call function later on
3. this always refer to who want to borrow or bind other function