This parameter is set to the function in all three instances of the call, bind, and apply methods.

• The call and use techniques Call the function after setting this to it.
• Only a function will be set as this using the bind method. The function will need to be called separately.

call

The function is called via the method call, which also allows you to supply arguments one at a time using commas.

let customer1 = { name: 'Leo', email: '[email protected]' };
let customer2 = { name: 'Nat', email: '[email protected]' };

function greeting(text) {
    console.log(`${text} ${this.name}`);
}

greeting.call(customer1, 'Hello'); // Hello Leo
greeting.call(customer2, 'Hello'); // Hello Nat

apply

The method apply invokes the function and allows you to pass in arguments as an array.

let customer1 = { name: 'Leo', email: '[email protected]' };
let customer2 = { name: 'Nat', email: '[email protected]' };
function greeting(text, text2) {
   console.log(`${text} ${this.name}, ${text2}`);
}
greeting.apply(customer1, ['Hello', 'How are you?']); // output Hello Leo, How are you?
greeting.apply(customer2, ['Hello', 'How are you?']); // output Hello Natm How are you?

bind

With any number of parameters and this array as input, the Bind method creates a new function for you. Use it if you want a later call to that function to include a specific context, such as events.

let customer1 = { name: 'Leo', email: '[email protected]' };
let customer2 = { name: 'Nat', email: '[email protected]' };
function greeting(text) {
   console.log(`${text} ${this.name}`);
}
let helloLeo = greeting.bind(customer1);
let helloNat = greeting.bind(customer2);
helloLeo('Hello'); // Hello Leo
helloNat('Hello'); // Hello Nat

This is how the Bind implementation might look:

Function.prototype.bind = function(context) {
    var fn = this;
    return function() {
        fn.apply(context, arguments);
    };
};

Both Call and Apply are acceptable. You get to choose whether sending in an array or a comma-separated list of arguments is simpler. Bind is unique. There is always a new function returned.

Like in the example, we can use Bind to curry functions. We can modify a straightforward hello function to create a helloJon or helloKelly. You can employ it in situations where the context is known but the firing time is unknown.

Summary

call: executes the function, binds the this value, and lets you give a list of arguments.

Apply binds the this value, calls the function, and accepts an array of arguments.

This value is bound by the bind function, which also accepts a list of parameters and returns a new function.