Suggest an edit

Improve this article

Refine the answer for “What does this do inside a class?”. 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 Is `this` in a Class

`this` inside a class is a **reference to the current instance** (object) created with `new`.

### Example:

```javascript
class User {
  constructor(name) {
    this.name = name; // this points to the object being created
  }

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

const u = new User("Alice");
u.greet(); // Hi, Alice!
```

Here:

- At the moment `new User("Alice")` runs, a **new object** is created.
- `this` inside the constructor points to exactly **that new object**.
- `this.name = name` writes a property onto the instance.
- Then `u.greet()` calls the method, where `this === u`.

---

## 2. `this` in Class Methods

Class methods have no `this` of their own, it is determined **at call time**.

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

sayHi() {
    console.log(this.name);
  }
}

const user = new User("Alice");
user.sayHi(); // this → user → "Alice"
```

If you call the method on its own (losing the context), `this` will be `undefined` (in strict mode):

```javascript
const say = user.sayHi;
say(); // TypeError: Cannot read properties of undefined
```

> Classes **always run in strict mode**, even if you never explicitly enabled it.

---

## 3. `this` in the Constructor

The constructor is called automatically with `new`, and `this` points to the **new instance**:

```javascript
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

const p = new Product("Shirt", 3000);
console.log(p.name); // Shirt
```

If it's not called via `new` → you get an error:

```javascript
Product("Shirt", 3000); // TypeError: Class constructor cannot be invoked without 'new'
```

---

## 4. `this` With Inheritance (extends)

If a class inherits from another, you must call `super()` **before accessing** `this`, otherwise you get an error.

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // creates this via the parent's constructor
    this.breed = breed; // this can now be used
  }
}
```

If `super()` is not called:

```javascript
class Dog extends Animal {
  constructor(name) {
    this.name = name; // ReferenceError: Must call super constructor before accessing 'this'
  }
}
```

---

## 5. Losing the `this` Context

When a method is passed as a callback, `this` is lost:

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

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

const u = new User("Alice");
setTimeout(u.greet, 1000); // undefined, because the context is lost
```

### Solution 1: Bind `this` Manually

```javascript
setTimeout(u.greet.bind(u), 1000); // Hi, Alice
```

### Solution 2: Use an Arrow Function

```javascript
class User {
  name = "Alice";

greet = () => {
    console.log(`Hi, ${this.name}`);
  };
}

const u = new User();
setTimeout(u.greet, 1000); // Hi, Alice
```

> Arrow functions **preserve** `this` **from the surrounding context**,
> which is why they are often used for event handlers inside a class.

---

## 6. In Static Methods, `this` Refers to the Class Itself

```javascript
class MathUtils {
  static describe() {
    console.log(this); // class MathUtils { ... }
  }
}

MathUtils.describe(); // this → MathUtils
```

If you extend the class:

```javascript
class AdvancedMath extends MathUtils {}

AdvancedMath.describe(); // this → AdvancedMath
```

In other words, `this` in a static method **refers not to an instance, but to the class itself**.

---

## 7. In Private and Arrow Methods

```javascript
class Counter {
  #count = 0;

increment = () => {
    this.#count++;
    console.log(this.#count);
  };
}

const c = new Counter();
setTimeout(c.increment, 1000); // this is preserved, works correctly
```

> Here `this` is not lost, because an arrow function does not create its own `this`.

---

## Summary

| Context | Value of `this` |
| --- | --- |
| In the constructor | New class instance |
| In a regular method | The object the method was called on |
| When context is lost (`setTimeout(obj.method)`) | `undefined` |
| In an arrow method | Inherited from the surrounding context (not lost) |
| In a static method | The class itself (not an instance) |
| Before calling `super()` in a subclass | Error: `this` is not accessible |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.