Mastering this, call, apply, and bind in JavaScript

When beginners start learning JavaScript, one word causes a lot of confusion: this. Sometimes it points to an object; sometimes it points to something else entirely. But once you understand the golden rule—who is calling the function—everything becomes simple.

What is this?

In simple terms, this refers to the object that is currently executing the code. Think of it as a pronoun. If I say "I am coding", "I" refers to me (Hitesh). If you say it, "I" refers to you.

this in Different Contexts

• Inside an Object: When a function is a method of an object, this refers to that object.

const user = {
  username: "hitesh_dev",
  greet: function() {
    console.log(`Hello, my name is ${this.username}`);
  }
};
user.greet(); // "this" is the user object.

• Inside a Normal Function: In a regular function (not an arrow function), this usually refers to the global object (the window in browsers).

Explicit Binding: Taking Control

Sometimes, we want to tell JavaScript exactly what this should point to. We do this using call, apply, and bind.

Mastering this, call, bind and apply in JS

When beginners start learning JavaScript, one word causes a lot of confusion: this. Sometimes it points to an object; sometimes it points to something else entirely. But once you understand the golden rule—who is calling the function—everything becomes simple.

The Classroom Analogy

Imagine a school classroom. A teacher asks students to introduce themselves by saying: "Tell your name."

• Student Rahul says: "My name is Rahul."

• Student Anu says: "My name is Anu."

• Student Alex says: "My name is Alex."

The instruction is identical, but the person speaking changes. In JavaScript, this works exactly like that. It refers to the object currently calling the function.

this Inside Normal Functions

If you call a function in the global scope, there is no specific "caller" object. In this case, JavaScript defaults to the global object.

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

sayHello(); 
// Output: Window object (in browsers)

this Inside Objects

When a function is a method inside an object, this becomes that object.

const student1 = {
  name: "Rahul",
  introduce() {
    console.log(this.name);
  }
};

const student2 = {
  name: "Anu",
  introduce() {
    console.log(this.name);
  }
};

student1.introduce(); // Output: Rahul
student2.introduce(); // Output: Anu

The Rule: Same function logic, different caller. Therefore, this changes.

Explicit Binding: call(), apply(), and bind()

Sometimes we want to force this to point to a specific object. We use these three methods to "borrow" functions.

call() – The Immediate Borrow

call() allows one object to use another object's method immediately. You pass arguments one by one.

const rahul = {
  name: "Rahul",
  greet: function(city) {
    console.log(`Hello, I am \({this.name} from \){city}`);
  }
};

const anu = { name: "Anu" };

rahul.greet.call(anu, "Delhi"); 
// Output: Hello, I am Anu from Delhi

apply() - The Array Specialist

apply() is identical to call(), but you can pass arguments as an array.

rahul.greet.apply(anu, ["Mumbai"]); 
// Output: Hello, I am Anu from Mumbai

bind() - The "Save for Later"

bind() doesn't run the function immediately. It returns a new function with this permanently attached to the object you chose.

const greetAlex = rahul.greet.bind({ name: "Alex" }, "London");

greetAlex(); // Output: Hello, I am Alex from London

Method	Invokes Immediately?	Argument Format
call()	Yes	Comma-separated (arg1, arg2)
apply()	Yes	Array ([arg1, arg2])
bind()	No (returns a function)	Comma-separated

Conclusion

Understanding this is a rite of passage for every JavaScript developer. Just remember: Look at the left side of the dot. Whoever is calling the function is this. When you need to change that caller manually, reach for call, apply, or bind.