JavaScript has many powerful features, but one concept that confuses beginners the most is this. When developers first see this inside a function, the biggest question usually is:

“What exactly does this refer to?”

Sometimes it points to an object, sometimes it doesn't behave as expected, and this can make debugging difficult.

Understanding this becomes even more important when working with functions like call(), apply(), and bind(), which allow us to control what this refers to.

In this article, we will explore:

• What this means in JavaScript

• How this behaves inside functions and objects

• What call(), apply(), and bind() do

• The difference between them

• Practical examples using simple objects

By the end, you’ll have a clear mental model of how JavaScript decides who is calling the function.

What this Means in JavaScript

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

You can think of this as the owner of the function at the moment it runs.

In simple terms:

this answers the question: “Who called this function?”

The value of this is determined when the function is executed, not when it is defined.

Understanding this idea makes it much easier to work with functions in JavaScript.

this Inside Normal Functions

When this is used inside a regular function (not inside an object), its value depends on how the function is called.

Example:

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

showThis();

In browsers, this will usually log the global object (window).

That means when a normal function is called without an object, JavaScript does not have a specific owner for the function, so it falls back to the global object.

This behavior often surprises beginners because they expect this to refer to something more specific.

this Inside Objects

When a function is called as a method of an object, this refers to that object.

Example:

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

person.greet();

Output:

Hello, my name is Rith

Here:

• greet() is called by the person object

• Therefore, this refers to person

So JavaScript follows a simple rule:

The object before the dot is the value of this.

person.greet()
      ↑
     this

Understanding “Who is Calling the Function”

A useful way to think about this is to ask:

Who is calling the function?

Consider this example:

const user1 = {
  name: "Alice",
  sayName: function () {
    console.log(this.name);
  }
};

const user2 = {
  name: "Bob"
};

user1.sayName();

Output:

Alice

Now suppose we use the same function with another object.

This is where call(), apply(), and bind() become useful.

They allow us to manually control what this should refer to.

What call() Does

The call() method allows us to call a function with a specific value for this.

In other words, we can borrow a function and run it for another object.

Example:

const person1 = {
  name: "Alice"
};

const person2 = {
  name: "Bob"
};

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

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

Output:

Hello, I am Alice
Hello, I am Bob

Here:

• We used the same greet function

• But we changed who this refers to

call() syntax:

functionName.call(thisArg, arg1, arg2, ...)

So the first argument sets the value of this.

What apply() Does

The apply() method works almost the same as call().

The difference is how arguments are passed.

With apply(), arguments are passed as an array.

Example:

function introduce(age, city) {
  console.log(this.name + " is " + age + " years old and lives in " + city);
}

const person = {
  name: "Rith"
};

introduce.apply(person, [22, "Kolkata"]);

Output:

Rith is 22 years old and lives in Kolkata

Syntax:

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

So the key idea is:

• call() → arguments passed individually

• apply() → arguments passed as an array

What bind() Does

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

Instead, it creates a new function with this permanently set to a specific object.

Example:

const person = {
  name: "Rith"
};

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

const greetPerson = greet.bind(person);

greetPerson();

Output:

Hello, I am Rith

Here:

• bind() returns a new function

• The value of this is fixed to person

This is useful when passing functions around, such as in event handlers or callbacks.

Difference Between call, apply, and bind

Method	Executes Immediately	How Arguments Are Passed	Return Value
call()	Yes	Arguments separately	Result of the function
apply()	Yes	Arguments as an array	Result of the function
bind()	No	Arguments separately	Returns a new function

Quick summary:

• call() → run function immediately with custom this

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

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

Practical Example: Method Borrowing

Method borrowing is a common use case for call().

Example:

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

const person2 = {
  name: "Alex"
};

person1.greet.call(person2);

Output:

Hello, I am Alex

Here we borrowed the greet method from person1 and used it for person2.

This works because call() allows us to set this manually.

Visual Idea: Function → Caller Relationship

You can imagine the relationship like this:

Object ----calls----> Function
   ↑                     |
   |                     |
   -------- this --------

Whichever object calls the function becomes the value of this.

And with call, apply, and bind, we can manually choose the caller.

Conclusion

Understanding this is an important step in mastering JavaScript. Instead of thinking of it as something mysterious, it becomes much clearer when you remember one rule:

this refers to the object that calls the function.

The methods call(), apply(), and bind() give us control over what this refers to, making functions more flexible and reusable.

To recap:

• this depends on how a function is called

• call() lets us call a function with a specific this

• apply() does the same but accepts arguments as an array

• bind() creates a new function with a fixed this

Once you understand these concepts, you'll find it much easier to work with objects, functions, and advanced JavaScript patterns.