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

Introduction

In JavaScript, one concept controls how functions behave depending on how they are called. That concept is the this keyword. Along with this, three powerful methods — call(), apply(), and bind() — allow you to control what this should be.

If you understand these properly, you gain full control over function execution in JavaScript.

What this Means in JavaScript

this refers to the object that is calling the function.

It is not decided where the function is written. It is decided when the function is called.

Caller → Function → this

Whoever calls the function becomes the value of this.

this Inside Normal Functions

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

show();

• In non-strict mode → this is the global object

• In strict mode → this is undefined

this Inside Objects

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

user.greet();

Output:

Prakash

Here, user is calling the function, so this refers to user.

Calling Context Changes this (Very Important)

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

const obj = {
  show
};

// Direct call
show();        // global / undefined

// Object call
obj.show();    // obj

This proves one rule:

this is decided at call time, not at definition time.

Function Borrowing Problem

Sometimes you want to use a method of one object with another object without copying it.

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

const user2 = {
  name: "Rahul"
};

user1.greet(); // Prakash

Now we want user2 to use greet. This is where call(), apply(), and bind() help.

What call() Does

call() allows you to set this manually and immediately execute the function.

Syntax

functionName.call(thisArg, arg1, arg2)

Example

user1.greet.call(user2);

Output:

Rahul

What apply() Does

apply() is similar to call(), but it takes arguments as an array.

Syntax

functionName.apply(thisArg, [arg1, arg2])

Example

function introduce(city, country) {
  console.log(`\({this.name} lives in \){city}, ${country}`);
}

const user = { name: "Prakash" };

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

What bind() Does

bind() does not execute the function immediately. It returns a new function with this permanently set.

Syntax

const newFn = functionName.bind(thisArg)

Example

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

const user = { name: "Prakash" };

const boundFn = greet.bind(user);
boundFn();

Real-World Use of bind()

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

setTimeout(user.greet.bind(user), 1000);

Without bind(), this would be lost.

Arrow Functions and this (Important)

const user = {
  name: "Prakash",
  greet: () => {
    console.log(this.name);
  }
};

user.greet(); // undefined

Explanation:

• Arrow functions do not have their own this

• They take this from their surrounding scope

Visual Understanding

• call() → sets this and runs immediately

• apply() → sets this, runs immediately, takes array

• bind() → returns a new function

Difference Between call, apply, and bind

Feature	call()	apply()	bind()
Executes immediately	Yes	Yes	No
Arguments format	Comma-separated	Array	Comma-separated
Returns function	No	No	Yes
Use case	Quick invocation	Array-based arguments	Reusable function

Combined Example

const person1 = { name: "Prakash" };
const person2 = { name: "Aman" };

function greet(age) {
  console.log(`\({this.name} is \){age} years old`);
}

// call
greet.call(person1, 21);

// apply
greet.apply(person2, [22]);

// bind
const fn = greet.bind(person1);
fn(25);

Practice Example :

const car = {
  brand: "Tesla",
  show() {
    console.log(this.brand);
  }
};

const bike = {
  brand: "Yamaha"
};

// call
car.show.call(bike);

// apply
function info(speed, type) {
  console.log(`\({this.brand} runs at \){speed} and is ${type}`);
}

info.apply(bike, ["120km/h", "sports"]);

// bind
const boundInfo = info.bind(car);
boundInfo("200km/h", "electric");

Common Mistakes

Losing this

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

const fn = user.greet;
fn(); // undefined

Fix

const fixed = user.greet.bind(user);
fixed();

Quick Summary of Rules

• Normal function → depends on how it is called

• Object method → this is the object

• call/apply → manually set this

• bind → returns a function with fixed this

• Arrow function → no own this

Conclusion

The this keyword becomes simple when you focus on one rule:

this depends on the caller

The methods call(), apply(), and bind() give you full control over that behavior.

If you master these concepts, you will write cleaner code, reuse functions efficiently, and avoid common bugs in JavaScript applications.

---

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn