call apply and bind javascript code example

Example 1: call apply bind

const obj = { number: 1 }

function foo() {
	console.log(this.number)
}

//bind - binds obj's 'this' context to foo, but doesn't call it
const newFoo = foo.bind(obj) 

//call/apply - binds obj's 'this' context to foo, then calls it
foo.call(obj, /*arg1*/, /*arg2*/) 
foo.apply(obj, [/*arg1*/, /*arg2*/])

//Only difference between call/apply is argument passing - ',' vs '[]'

Example 2: Javascript call() apply() bind()

Apply vs. Call vs. Bind Examples

Call

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.call(person1, 'Hello'); // Hello Jon Kuperman
say.call(person2, 'Hello'); // Hello Kelly King

Apply

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.apply(person1, ['Hello']); // Hello Jon Kuperman
say.apply(person2, ['Hello']); // Hello Kelly King

Bind

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say() {
    console.log('Hello ' + this.firstName + ' ' + this.lastName);
}

var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);

sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King