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

Understanding this in Simple Terms

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

A simple way to think about it is:

this answers the question: Who is calling this function?

The value of this is not fixed. It depends on how the function is called, not where it is written.

this Inside a Normal Function

When this is used inside a regular function that is not part of an object, its value depends on the environment.

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

show();

In a browser, this will usually refer to the global object. In strict mode, it will be undefined.

The key idea is that no object is clearly calling the function, so this does not refer to a custom object.

this Inside an Object

When a function is defined as a method inside an object, this refers to the object that calls the method.

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

person.greet();

Here, person is calling greet(). Therefore, this refers to person.

If the calling object changes, this changes as well.

Borrowing Methods with call()

The call() method allows one object to borrow a function from another object. It immediately invokes the function and allows you to specify what this should refer to.

Creating an Object with a Method

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

Calling it normally:

user1.introduce("New York");

Now create another object without the method:

const user2 = {
  name: "Emma"
};

We can borrow the method using call():

user1.introduce.call(user2, "London");

Here:

• call() sets this to user2

• The argument "London" is passed normally

So this.name becomes "Emma".

Using apply()

The apply() method works almost exactly like call(). The difference is how arguments are passed.

• call() takes arguments separately.

• apply() takes arguments as an array.

Using the same example:

user1.introduce.apply(user2, ["Paris"]);

The function runs immediately, just like call(), but the arguments are inside an array.

Using bind()

The bind() method is different. It does not immediately execute the function. Instead, it returns a new function with this permanently set to a specific object.

const boundFunction = user1.introduce.bind(user2, "Berlin");

At this point, nothing runs yet.

When we call the new function:

boundFunction();

It prints:

Hi, I am Emma from Berlin

Important idea:

• bind() creates a new function.

• It does not execute immediately.

• It locks this to the provided object.

Difference Between call(), apply(), and bind()

Summary in Simple Words

• call() runs the function immediately and sets this.

• apply() does the same but takes arguments in an array.

• bind() prepares a new function with a fixed this for later use.

Seeing the Concept Clearly

The power of these methods becomes clear when you understand that this depends on who calls the function.

Normally:

user1.introduce("Rome");

Here, this is user1.

With call() or apply():

user1.introduce.call(user2, "Madrid");

Now this becomes user2.

With bind():

const newIntro = user1.introduce.bind(user2, "Tokyo");
newIntro();

Even though the function belongs to user1, this permanently refers to user2.

Final Understanding

The keyword this represents the object that is calling a function. Its value changes depending on how the function is invoked.

The methods call(), apply(), and bind() give you full control over what this should refer to.

• Use call() when you want to invoke a function immediately with specific arguments.

• Use apply() when your arguments are already in an array.

• Use bind() when you want to create a new function with a fixed this for later use.

Understanding these concepts is essential for mastering object behavior, method borrowing, and advanced function handling in JavaScript.