Suggest an edit

Improve this article

Refine the answer for “this inside an object method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. Looks up `method` inside `obj` (or its prototypes),
2. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts560 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.