What Does this Mean?

this refers to:

Who is calling the function

The value of this changes depending on how the function is called.

this Inside Normal Functions

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

show();

Browser Output

Window object

this Inside Objects

const user = {
  name: "Ali",

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

user.greet();

Output

Ali

Why?

Because:

user called greet()

So:

this = user

Function → Caller Relationship

flowchart LR
    A[user object] --> B[greet()]
    B --> C[this = user]

What Is call()?

call() lets you manually set this.

Syntax

functionName.call(thisValue, arg1, arg2)

Example

const user1 = {
  name: "Ali"
};

const user2 = {
  name: "Sara"
};

function greet(city) {
  console.log(`${this.name} from ${city}`);
}

greet.call(user1, "Lucknow");
greet.call(user2, "Delhi");

Output

Ali from Lucknow
Sara from Delhi

What Happened?

call() changed the value of this.

What Is apply()?

apply() works like call() but arguments are passed as an array.

Syntax

functionName.apply(thisValue, [args])

Example

const user = {
  name: "Ahmed"
};

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

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

Output

Ahmed from Lucknow, India

call() vs apply()

What Is bind()?

bind() creates a new function with fixed this.

It does not execute immediately.

Syntax

const newFunction = oldFunction.bind(thisValue)

Example

const user = {
  name: "Ali"
};

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

const boundFunction = greet.bind(user);

boundFunction();

Output

Hello Ali

Important Difference

bind() Visualization

flowchart LR
    A[greet()] --> B[bind(user)]
    B --> C[new function]

Method Borrowing With call()

Original Object

const person1 = {
  name: "Sara",

  greet() {
    console.log(`Hello ${this.name}`);
  }
};

Borrow Method

const person2 = {
  name: "Ali"
};

person1.greet.call(person2);

Output

Hello Ali

Using apply() With Array Arguments

function add(a, b) {
  console.log(a + b);
}

add.apply(null, [10, 20]);

Output

30

Storing Function With bind()

const user = {
  name: "Sara"
};

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

const savedFunction = greet.bind(user);

savedFunction();

Output

Sara

Comparison Table

Real-World Use Cases

Common Beginner Mistake

Incorrect:

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

This immediately executes.

Better:

const fn = greet.bind(user);

fn();

Easy Way to Remember

Assignment

1. Create Object With Method

const student = {
  name: "Ali",

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

student.show();

2. Borrow Method Using call()

const anotherStudent = {
  name: "Sara"
};

student.show.call(anotherStudent);

3. Use apply()

function multiply(a, b) {
  console.log(a * b);
}

multiply.apply(null, [4, 5]);

4. Use bind()

const boundShow = student.show.bind(anotherStudent);

boundShow();

Key Takeaways

Final Notes

Understanding this, call(), apply(), and bind() is important because they are heavily used in:

• React

• Event handling

• Object-oriented JavaScript

• Callbacks

• Framework internals

The most important idea:

`this` depends on how a function is called