A Deep Dive into this, Call(), Apply(), and Bind()

What this Means in JavaScript

In JavaScript, this refers to the object associated with the current function invocation.

The key rule is, the value of this is determined by how a function is called, not where it is defined.

Inside a function body, this allows the function to access properties of the object it is operating on.

this Inside Normal Functions

When a regular function is invoked directly, without being attached to an object, this refers to the global object (in browsers this is window, unless strict mode changes the behavior).

Example:

function show() {
  console.log(this);
}

show();

If executed in a browser, the output will typically be:

window

This happens because the function was invoked without an object context.

this Inside Object Methods

When a function is stored as a property of an object and invoked through that object, this refers to the object used in the call expression.

Example:

const person = {
  name: "Arjun",
  greet() {
    console.log(this.name);
  }
};

person.greet();

Output:

Arjun

What Happens During the Call

The function accesses:

this.name

When the function is invoked as:

person.greet()

JavaScript sets:

this === person

So the expression becomes:

this.name → person.name → "Arjun"

This allows object methods to work with the object's own data.

What call() Does

The call() method allows us to invoke a function while explicitly setting the value of this.

This is useful when we want to reuse a function with different objects.

Example:

function greet() {
  console.log(this.name);
}

const user1 = { name: "Ravi" };
const user2 = { name: "Meera" };

greet.call(user1);
greet.call(user2);

Output:

Ravi
Meera

Passing Arguments with call()

Arguments are passed individually.

function introduce(city, country) {
  console.log(this.name + " from " + city + ", " + country);
}

const user = { name: "Anita" };

introduce.call(user, "Delhi", "India");

What apply() Does

apply() works the same way as call(), except arguments are passed as an array.

Example:

function introduce(city, country) {
  console.log(this.name + " from " + city + ", " + country);
}

const user = { name: "Anita" };

introduce.apply(user, ["Delhi", "India"]);

Output:

Anita from Delhi, India

So the difference is purely how arguments are supplied.

What bind() Does

bind() behaves differently from call() and apply().

Instead of executing the function immediately, bind() creates a new function with this permanently bound to the specified object.

Example:

function greet() {
  console.log(this.name);
}

const person = { name: "Karan" };

const greetPerson = greet.bind(person);

greetPerson();

Output:

Karan

Here:

• bind() does not execute the function

• It returns a new function

• That function always uses person as this

Difference Between call(), apply(), and bind()

Method	Executes Immediately	Argument Format	Return Value
call()	yes	Passed individually (comma separated)	Returns the result of the function
apply()	yes	Passed as an array or array-like object	Returns the result of the function
bind()	no	Passed individually when binding	Returns a new bound function