call(), apply() and bind()

These three are the prototype functions of function.

call():

call() is used to invoke the function as same as the normal invoke.

Ex:
function greet(msg) {
    console.log(msg);
}
greet("hello"); // hello
greet.call(this, "hello"); // hello

using call prototype function we can barrow the function from the other objects.

const wizard = {
  name: 'Merlin',
  health: 100,
  heal: function(num1, num2) {
    this.health += num1 + num2;
  }
}

const archer = {
  name: 'Robin Hood',
  health: 50
}

wizard.heal.call(archer, 50, 60) // 160

apply():

apply() is used to invoke the function as same as the normal invoke, but the difference is we pass the arguments as object as first and remaining arguments passed as an array as second parameter where call has object as first and remaining with comma separator as same as in normal functions.

Ex:
function greet(msg) {
    console.log(msg);
}
greet("hello"); // hello
greet.apply(this, ["hello"]); // hello

using apply prototype function also we can barrow the function from the other objects as call function.

const wizard = {
  name: 'Merlin',
  health: 100,
  heal: function(num1, num2) {
    this.health += num1 + num2;
  }
}

const archer = {
  name: 'Robin Hood',
  health: 50
}

wizard.heal.apply(archer, [50, 60]) // 160

bind():

• bind is a prototype function of function that returns an function by appending that function to the another object passed in the argument.

• it will not invoke the function as call and apply does.

• It is used to fix the dynamic scoping that ruins the lexical scoping.

• it takes the arguments as same as call.

const wizard = {
  name: 'Merlin',
  health: 100,
  heal: function(num1, num2) {
    this.health += num1 + num2;
  }
}

const archer = {
  name: 'Robin Hood',
  health: 50
}

const healArcher = wizard.heal.bind(archer, 50, 60);
healArcher() // 160