Different ways to bind 'this' in JavaScript

JavaScript

The short answer

The value of this in JavaScript depends on how a function is called. There are five main ways this gets its value: default binding, implicit binding, explicit binding (using call, apply, bind), new binding, and arrow function binding.

The five binding rules

1. Default binding

When a function is called on its own (not as a method, not with new, not with call/apply/bind), this defaults to the global object (window in browsers). In strict mode, it is undefined.

function showThis() {
  console.log(this);
}
showThis(); // window (or undefined in strict mode)

2. Implicit binding

When a function is called as a method on an object, this is the object that is calling the method — the object to the left of the dot.

const user = {
  name: 'John',
  greet() {
    console.log(this.name);
  },
};
user.greet(); // "John" — this is user

But here is a very common trap:

const greet = user.greet;
greet(); // undefined — this is now window (default binding)

When you assign the method to a variable and call it without the object, the implicit binding is lost. This is one of the most common sources of bugs with this.

3. Explicit binding — call, apply, bind

You can manually set this using call(), apply(), or bind().

call — calls the function immediately with a given this:

function greet() {
  console.log(`Hello, ${this.name}`);
}
const user = { name: 'John' };
greet.call(user); // "Hello, John"

apply — same as call, but takes arguments as an array:

function introduce(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}
const user = { name: 'John' };
introduce.apply(user, ['Hi', '!']); // "Hi, John!"
introduce.call(user, 'Hi', '!'); // "Hi, John!"

bind — returns a new function with this permanently set:

function greet() {
  console.log(`Hello, ${this.name}`);
}
const user = { name: 'John' };
const boundGreet = greet.bind(user);
boundGreet(); // "Hello, John"

The difference is that bind does not call the function right away. It gives you a new function you can call later.

4. new binding

When a function is called with new, this is set to the newly created object.

function Person(name) {
  this.name = name;
}
const john = new Person('John');
console.log(john.name); // "John"

When you use new, JavaScript creates a fresh empty object, sets this to that object, and returns it (unless the function returns something else).

5. Arrow function binding

Arrow functions do not have their own this. They inherit this from the surrounding scope where they are defined. This is called lexical this.

const user = {
  name: 'John',
  greet: () => {
    console.log(this.name); // undefined — not user
  },
};
user.greet(); // undefined

The arrow function does not get user as this. It takes this from the surrounding scope, which in this case is the global scope.

Arrow functions are useful when you want to keep the outer this:

const user = {
  name: 'John',
  friends: ['Jane', 'Bob'],
  showFriends() {
    this.friends.forEach((friend) => {
      // arrow function inherits `this` from showFriends
      console.log(`${this.name} knows ${friend}`);
    });
  },
};
user.showFriends();
// "John knows Jane"
// "John knows Bob"

If we used a regular function inside forEach, this would be undefined (or window) because it would get default binding.

Priority of binding

When multiple rules could apply, here is the order from highest to lowest priority:

  1. new binding — highest priority
  2. Explicit binding (call, apply, bind)
  3. Implicit binding (method call)
  4. Default binding — lowest priority

Arrow functions are a special case — they ignore all of the above and always use lexical this.

Common Pitfalls

A very common mistake is using an arrow function as a method on an object, thinking this will refer to the object. It will not. Arrow functions take this from where they are defined, not from the object they are attached to. Use regular functions for object methods.

Interview Tip

When answering this question, go through each binding rule with a small code example. The interviewer is not just looking for you to list them — they want to see that you can predict the value of this in different situations. Knowing the priority order is a bonus that shows deeper understanding.

Why interviewers ask this

Understanding this is essential for writing correct JavaScript. It affects how methods work, how event handlers behave, how callbacks run, and how React components function. Interviewers ask this to see if you can debug this-related bugs, choose between regular and arrow functions wisely, and explain why code behaves a certain way. It is one of the trickiest parts of JavaScript, and candidates who can explain it clearly stand out.

Table of Contents