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

1) What this means in JavaScript (simple explanation)

In JavaScript, this refers to the object that is currently “calling” the function.

this in JavaScript refers to the object that is currently calling the function.

• In object methods, this points to the object the method belongs to.

• In standalone functions, this is usually the global object (or undefined in strict mode).

• Arrow functions don’t have their own this; they use the this from their surrounding context.

Example

• person1.greet() → this is person1.

• greet.call(person2) → this is explicitly set to person2.

const person1 = {
  name: "Alice",
  greet: function() {
    console.log("Hello, I am " + this.name);
  }
};

const person2 = { name: "Bob" };

person1.greet();          // Hello, I am Alice
person1.greet.call(person2); // Hello, I am Bob

---

2) this inside normal functions

In normal (regular) functions, the value of this depends on how the function is called.
It does not depend on where the function is written, but who calls the function.

• If an object calls the function, this refers to that object.

• If a function is called normally (without an object), this refers to the global object (window in browsers) or undefined in strict mode.

Example :

• user is calling showName().

• So this refers to the user object.

• Therefore this.name becomes "Rahul".

const user = {
  name: "Rahul",
  showName: function() {
    console.log(this.name);
  }
};

user.showName();

Output

Rahul

3) this inside objects

When this is used inside an object method, it refers to the object that owns (calls) the method.
This allows the method to access the object’s properties.

Example

• student object calls showInfo().

• So this refers to the student object.

• this.name → "Amit"

• this.age → 20

const student = {
  name: "Amit",
  age: 20,
  showInfo: function() {
    console.log(this.name + " is " + this.age + " years old");
  }
};

student.showInfo();

Output

Amit is 20 years old

---

4) What call() does

call() is a JavaScript method used to call a function and manually set the value of this.
It lets you borrow a function from one object and use it with another object.

Syntax

functionName.call(object, arg1, arg2)

• The first argument sets this.

• Other arguments are passed one by one.

Example

• greet.call(person1, "Pune") → this becomes person1.

• greet.call(person2, "Mumbai") → this becomes person2.

const person1 = {
  name: "Amit"
};

const person2 = {
  name: "Rahul"
};

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

greet.call(person1, "Pune");
greet.call(person2, "Mumbai");

Output

Hello, I am Amit from Pune
Hello, I am Rahul from Mumbai

5) What apply() does

apply() is a JavaScript method used to call a function and set the value of this, similar to call().
The difference is that arguments are passed as an array.

Syntax

• The first argument sets this.

• The second argument is an array of parameters.

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

Example

• apply() calls the function immediately.

• this is set to the object you pass (person1 or person2).

• Arguments are passed inside an array.

const person1 = {
  name: "Amit"
};

const person2 = {
  name: "Rahul"
};

function greet(city, country) {
  console.log("Hello, I am " + this.name + " from " + city + ", " + country);
}

greet.apply(person1, ["Pune", "India"]);
greet.apply(person2, ["Mumbai", "India"]);

Output

Hello, I am Amit from Pune, India
Hello, I am Rahul from Mumbai, India

---

6) What bind() does

bind() is a JavaScript method used to create a new function with a fixed value of this.
Unlike call() and apply(), bind() does not run the function immediately. It returns a new function that you can call later.

Syntax

• The first argument sets this.

• Other arguments are optional and passed normally.

functionName.bind(object, arg1, arg2)

Example

• bind(person) sets this to the person object.

• It returns a new function (greetPerson).

• The function runs only when greetPerson() is called.

const person = {
  name: "Amit"
};

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

const greetPerson = greet.bind(person, "Pune");

greetPerson();

Output

Hello, I am Amit from PuneExplanation

---

7) Difference between call, apply, and bind

call(), apply(), and bind() are JavaScript methods used to control the value of this in a function.
They allow a function to be used with different objects.

• call → Call now

• apply → Apply array arguments

• bind → Bind this for later use.

Example

• call() runs the function immediately and passes arguments one by one.

• apply() runs the function immediately and passes arguments as an array.

• bind() does not run immediately; it returns a new function with this fixed

const person1 = { name: "Amit" };
const person2 = { name: "Rahul" };

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

// call
greet.call(person1, "Pune");

// apply
greet.apply(person2, ["Mumbai"]);

// bind
const greetPerson = greet.bind(person1, "Delhi");
greetPerson();

Output

Hello, I am Amit from Pune
Hello, I am Rahul from Mumbai
Hello, I am Amit from Delhi

Comparison Table

Method	Executes Immediately	Arguments	Return
call()	Yes	Passed individually	Result of function
apply()	Yes	Passed as array	Result of function
bind()	No	Passed individually	New function

---

Assignment Idea

Create an Object with a Method Using this

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

person.greet("Delhi");

2 Borrow the Method Using call()

call() lets another object use the same method.

const person2 = {
  name: "Sara"
};

person.greet.call(person2, "Mumbai");

3 Use apply() with Array Arguments

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

const person3 = {
  name: "John"
};

person.greet.apply(person3, ["Pune"]);

5 Use bind() and Store the Function

bind() creates a new function with a fixed this value.

const person4 = {
  name: "Emma"
};

const greetEmma = person.greet.bind(person4);

greetEmma("London");

---

summarize

In JavaScript, this refers to the object that is currently executing a function. In object methods, this points to the object itself, allowing access to its properties. In normal standalone functions, this usually refers to the global object (or undefined in strict mode). Arrow functions do not have their own this; they inherit it from their surrounding context.

JavaScript provides call(), apply(), and bind() to control the value of this.

• call() invokes a function immediately with a specified this and individual arguments.

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

• bind() returns a new function with a fixed this value that can be executed later.

Understanding this and these methods helps developers control function context, reuse functions across objects, and write more flexible JavaScript code.