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

When developers first start learning JavaScript, one word quietly creates a lot of confusion:

this

At first glance, it feels mysterious.
Sometimes it refers to an object.
Sometimes it refers to window object.
Sometimes it behaves differently depending on how the function is called.

But once you understand one simple idea, everything becomes much easier.

this depends on who is calling the function.

In this article, we will explore the magic behind:

• this

• call()

• apply()

• bind()

And by the end, you will clearly understand how functions can borrow behaviour from other objects.

Understanding this in JavaScript

Think of this as a reference to the object that is calling the function.

In simple words:

this = the object that owns or calls the function

Let's start with a simple function.

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

sayHello();

If you run this in the browser, this usually refers to the global object (window).

Because the function was called without any object.

"this" Inside Normal Functions

When a normal function runs by itself, this usually points to the global object.

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

var name = "Santosh";

showName();

Output:

Santosh

Why? Because the variable name exists on the global object.

But this is not the usual way we use this.

The real power appears when functions are used inside objects.

"this" Inside Objects

Objects allow functions to access their own properties using this.

const user = {
  name: "Santosh",
  role: "Developer",

  introduce: function () {
    console.log("Hi, I am " + this.name);
  }
};

user.introduce();

Output:

Hi, I am Santosh

Here:

this → user object

Because the user object called the function.

Visual Idea: Function → Caller Relationship

Object (Caller)
      │
      │ calls
      ▼
Function executes
      │
      ▼
this = caller object

Example:

user.introduce()

user  → caller
introduce() → function
this → user

What if Another Object Wants to Use the Same Function?

Suppose we have another object.

const person = {
  name: "Amit"
};

But person does not have the introduce() method.

We could copy the function, but that is not a good idea.

Instead, JavaScript allows us to borrow the function.

And this is where call() comes in.

What call() Does

call() allows you to manually set the value of this when calling a function.

Syntax:

functionName.call(object, arg1, arg2)

Example:

const user = {
  name: "Santosh"
};

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

introduce.call(user, "Delhi");

Output:

Hi, I am Santosh from Delhi

Here:

this → user

Even though introduce() is not inside the object.

What apply() Does

apply() works almost exactly like call().

The only difference is how arguments are passed.

Syntax:

functionName.apply(object, [args])

Example:

const user = {
  name: "Santosh"
};

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

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

Output:

Santosh from Delhi, India

Notice:

call()  → arguments separated
apply() → arguments in array

What bind() Does

bind() is a little different.

Instead of immediately calling the function, it returns a new function with this fixed.

Syntax:

const newFunction = oldFunction.bind(object)

Example:

const user = {
  name: "Santosh"
};

function introduce() {
  console.log("Hi, I am " + this.name);
}

const newIntro = introduce.bind(user);

newIntro();

Output:

Hi, I am Santosh

Here:

bind() → returns a new function

So you can call it later.

This is very useful in event handlers and callbacks.

Comparison: call() vs apply() vs bind()

Feature	call()	apply()	bind()
Executes Immediately	✅ Yes	✅ Yes	❌ No
Arguments	Normal arguments	Array of arguments	Normal arguments
Returns new function	❌ No	❌ No	✅ Yes
Sets this	✅ Yes	✅ Yes	✅ Yes

Simple rule:

call  → invoke now with arguments
apply → invoke now with array
bind  → create function for later

Real Practical Example

Let’s see function borrowing.

const student1 = {
  name: "Santosh"
};

const student2 = {
  name: "Sona"
};

function showName(subject) {
  console.log(this.name + " studies " + subject);
}

Using call():

showName.call(student1, "JavaScript");

Output

Santosh studies JavaScript

Using apply():

showName.apply(student2, ["React"]);

Output

Sona studies React

Assignment Practice Time

Try solving this small exercise by yourself :)

1: Create an object with a method

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

2: Borrow the method using call()

const bike = {
  brand: "Yamaha"
};

car.showBrand.call(bike);

Expected Output

Yamaha

3: Use apply() with array arguments

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

introduce.apply({ name: "Amit" }, ["Delhi", "India"]);

4: Use bind() and store the function

const person = {
  name: "Ravi"
};

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

const greetPerson = greet.bind(person);

greetPerson();

Final Thoughts

Understanding this is one of the most important milestones in JavaScript.

Once you remember this rule, things become much simpler:

this depends on who calls the function.

And when you need more control, JavaScript gives you powerful tools:

• call() → call function with custom this

• apply() → same as call but arguments as array

• bind() → create a new function with fixed this

Mastering these concepts will help you understand:

• Event handlers

• React class components

• Callbacks

• Function borrowing

• Advanced JavaScript patterns

And once you get comfortable with them, you will realize:

JavaScript functions are far more powerful than they first appear.

JavaScript becomes easier when you try things yourself.

Thank you for reading this article.

If you found this helpful, feel free to connect with me on LinkedIn and follow my journey as I continue sharing JavaScript and frontend concepts (more blogs).