this inside an object method

JavaScriptJunior~2 min read

Short answer

Inside an object method, the value of this points to the object itself through which the method was called.

Example

javascript

const user = {
  name: 'Oleh',
  sayHi() {
    console.log(this.name);
  }
};

user.sayHi(); // "Oleh"

Here:

this inside sayHi() points to user,
because the method is called as user.sayHi().

How it works under the hood

When the call:

javascript

obj.method()

is executed, JS does two things:

Looks up method inside obj (or its prototypes),
Calls it with a bound context - this = obj at call time.

If you save the method to a variable - the context is lost

javascript

const user = {
  name: 'Oleh',
  sayHi() {
    console.log(this.name);
  }
};

const fn = user.sayHi;
fn(); // undefined (or an error in strict mode)

Why?

With fn() the method is called without an object.
So this inside the function no longer points to user:
- in strict mode -> this = undefined;
- in non-strict mode -> this = window (in the browser).

How to restore the correct context

Method 1 - call through the object

javascript

user.sayHi(); // works

Method 2 - use bind()

javascript

const fn = user.sayHi.bind(user);
fn(); // "Oleh"

bind() creates a new function with a permanently "bound" context.

Example with nested objects

javascript

const user = {
  name: 'Oleh',
  address: {
    city: 'Kyiv',
    getCity() {
      console.log(this.city);
    }
  }
};

user.address.getCity(); // "Kyiv"

Here this points to address, because the method was called as user.address.getCity().

But if you take the function out...

javascript

const cityFunc = user.address.getCity;
cityFunc(); // undefined

The context is lost - the call happens without an object.

this does not depend on where the function is declared

Only on how it is called:

javascript

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

const obj1 = { show };
const obj2 = { show };

obj1.show(); // this = obj1
obj2.show(); // this = obj2

The same function code, but this is different - because it was called through different objects.

In arrow functions this behaves differently

javascript

const user = {
  name: 'Oleh',
  sayHi: () => {
    console.log(this.name);
  }
};

user.sayHi(); // undefined

Arrow functions have no own this - they take this from the outer lexical environment (where they were declared). In this case - from the global scope.

That is why arrow functions should not be used as object methods.

Example where an arrow function is actually appropriate

Arrow functions are useful when you need to preserve this from the outer method:

javascript

const user = {
  name: 'Oleh',
  friends: ['Bob', 'Max'],
  showFriends() {
    this.friends.forEach(friend => {
      console.log(`${this.name} knows ${friend}`);
    });
  }
};

user.showFriends();
// "Oleh knows Bob"
// "Oleh knows Max"

Here friend => does not create a new this, so the arrow function uses this from the showFriends() method.

SUMMARY

Situation	What `this` is
`obj.method()`	`obj` itself
`method()` without an object	`undefined` (or `window` in old mode)
Arrow function	`this` from the outer scope
`bind(obj)`	always `obj`, regardless of the call
`call` / `apply`	set `this` manually at call time

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.