The Magic of this, call(), apply(), and bind() in JavaScript

In JavaScript, one concept that often confuses beginners is this. It looks simple but behaves differently depending on how a function is called.

Along with this, JavaScript also provides methods like call(), apply(), and bind() that allow us to control which object a function belongs to.

In this article, we’ll understand these concepts using simple examples.

What Does this Mean in JavaScript?

In simple terms:

this refers to the object that is calling the function.

Think of it like asking:

“Who is calling this function?”

Example:

const person = {
  name: "Ram",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet();

Output:

Hello, my name is Ram

Here:

• this refers to the person object

• So this.name becomes "Ram"

this Inside Normal Functions

In a normal function (not inside an object), this usually refers to the global object.

Example:

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

show();

In browsers, this will refer to the window object.

This is why this behaves differently depending on how the function is called.

this Inside Objects

When a function is called inside an object, this refers to that object.

Example:

const car = {
  brand: "Toyota",
  showBrand: function() {
    console.log(this.brand);
  }
};

car.showBrand();

Output:

Toyota

Here:

• this refers to the car object.

What Does call() Do?

The call() method allows us to borrow a function from another object and use it with a different object.

Example:

const person1 = {
  name: "Ram"
};

const person2 = {
  name: "Suraj"
};

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

greet.call(person1);
greet.call(person2);

Output:

Hello Ram
Hello Suraj

Here, we used call() to change what this refers to.

What Does apply() Do?

apply() works the same way as call(), but the difference is how arguments are passed.

Example:

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

const person = {
  name: "Ram"
};

introduce.apply(person, ["Pune", "India"]);

Output:

Ram lives in Pune, India

The arguments are passed as an array.

What Does bind() Do?

bind() creates a new function with this permanently set to a specific object.

Example:

const person = {
  name: "Ram"
};

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

const greetPerson = greet.bind(person);

greetPerson();

Output:

Hello Ram

Unlike call() and apply(), bind() does not execute the function immediately.

It returns a new function.

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

Method	How It Works	Arguments
call()	Calls the function immediately	Passed individually
apply()	Calls the function immediately	Passed as an array
bind()	Returns a new function	Arguments can be preset

Example:

fn.call(obj, arg1, arg2)

fn.apply(obj, [arg1, arg2])

const newFn = fn.bind(obj)

Example

Create an object with a method.

const student = {
  name: "Ram",
  showName: function() {
    console.log("Student name: " + this.name);
  }
};

Borrow the method using call().

const student2 = {
  name: "Suraj"
};

student.showName.call(student2);

Output:

Student name: Suraj

Use apply() with arguments.

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

const person = { name: "Ram" };

introduce.apply(person, ["Pune", "India"]);

Use bind().

const sayHello = introduce.bind(person, "Pune", "India");

sayHello();

Conclusion

Understanding this in JavaScript is important because it determines which object is being used inside a function.

Key takeaways:

• this refers to the object calling the function

• call() allows a function to be called with a specific object

• apply() works like call() but accepts arguments as an array

• bind() creates a new function with fixed this

Once you understand these concepts, you can write more flexible and reusable JavaScript code.