Suggest an edit

Improve this article

Refine the answer for “this in JavaScript”. 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)

## 1. What `this` is

> `this` **is a reference to the execution context of a function**,
> that is - *the object in whose context the function was called*.

In simpler terms:

- `this` is not determined when the function is declared;
- it is **assigned at the moment the function is called** (runtime);
- and depends on the **way it is called**, not on where the function is written.

---

## 2. Global context

In the **global scope** (outside a function):

```javascript
console.log(this);
```

- In a **browser** → `window`
- In **Node.js** → `{}` (an empty object in the module)

---

## 3. Inside a regular function

```javascript
function showThis() {
  console.log(this);
}

showThis(); // ?
```

With no "owner" (`obj.method()`):

- In **non-strict mode** → `this = window`
- In **strict mode (**`'use strict'`**)** → `this = undefined`

---

## 4. In an object method

```javascript
const user = {
  name: 'Tim',
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

user.sayHi(); // Hi, I'm Tim
```

Here `this` → refers to the `user` object,
because the function is called **through a dot** (`user.sayHi()`).

---

## 5. Losing `this`

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

const fn = user.sayHi;
fn(); // undefined, because the context is lost
```

When we store a reference to the method in a variable, `this` is no longer tied to `user`.

---

## 6. How to keep `this`

### Way 1 - `bind`

```javascript
const boundFn = user.sayHi.bind(user);
boundFn(); // Hi, I'm Tim
```

### Way 2 - an arrow function

Arrow functions **have no `this` of their own** -
they **inherit** `this` **from the outer scope**:

```javascript
const user = {
  name: 'Tim',
  sayHiLater() {
    setTimeout(() => {
      console.log(this.name); // 'Tim'
    }, 1000);
  }
};

user.sayHiLater();
```

---

## 7. In constructors (`new`)

If a function is called with `new`,
`this` points to the **new object being created**:

```javascript
function User(name) {
  this.name = name;
}

const tim = new User('Tim');
console.log(tim.name); // Tim
```

When calling via `new`:

1. an empty object `{}` is created;
2. it is bound to `this`;
3. the function runs;
4. that object is returned.

---

## 8. In event handlers (browser)

```javascript
button.addEventListener('click', function() {
  console.log(this); // the button element
});
```

`this` inside the handler points to the **DOM element** the event is attached to.

If you use an arrow function:

```javascript
button.addEventListener('click', () => {
  console.log(this); // not button, but the outer context
});
```

---

## 9. Explicit control of `this` (`call`, `apply`, `bind`)

| Method | What it does | When it is called |
|---|---|---|
| `call(thisArg, a, b)` | calls the function with the given `this` | immediately |
| `apply(thisArg, [a, b])` | the same, but arguments as an array | immediately |
| `bind(thisArg)` | returns a new function with `this` "bound" | later |

```javascript
function greet() {
  console.log(`Hi, ${this.name}`);
}

const user = { name: 'Tim' };

greet.call(user);  // Hi, Tim
greet.apply(user); // Hi, Tim
greet.bind(user)(); // Hi, Tim
```

---

## 10. In arrow functions

> Arrow functions **have no `this` of their own**.
> It is **inherited** from the outer lexical environment.

```javascript
const user = {
  name: 'Tim',
  showThis: () => console.log(this)
};

user.showThis(); // window (or undefined in strict mode)
```

Here `this` is not `user`,
because the arrow function took `this` from the global context.

---

## 11. `this` in classes

```javascript
class User {
  constructor(name) {
    this.name = name;
  }

sayHi() {
    console.log(`Hi, ${this.name}`);
  }
}

const tim = new User('Tim');
tim.sayHi(); // Hi, Tim
```

In class methods, `this` works the same way as in regular object methods.

---

## SUMMARY

| Context | What `this` will be |
|---|---|
| Global (in a browser) | `window` |
| In a regular function | `undefined` (in strict), `window` (in non-strict) |
| In an object method | The object itself |
| In an arrow function | `this` of the outer scope |
| In a constructor / class | The new instance |
| In an event handler | The DOM element |
| Via `call` / `apply` / `bind` | The manually specified object |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.