Що робить this всередині класу?

JavaScriptJunior~1 хв читання

1. Що таке `this` у класі

this всередині класу, це посилання на поточний екземпляр (об'єкт), створений за допомогою new.

Приклад:

javascript

class User {
  constructor(name) {
    this.name = name; // this вказує на об'єкт, що створюється
  }

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

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

Тут:

У момент new User("Alice") створюється новий об'єкт.
this всередині конструктора вказує саме на цей новий об'єкт.
this.name = name записує властивість в екземпляр.
Потім u.greet() викликає метод, де this === u.

2. `this` у методах класу

Методи класу не мають власного this, він визначається в момент виклику.

javascript

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

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

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

Якщо викликати метод окремо (втративши контекст), this буде undefined (у strict mode):

javascript

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

Класи завжди працюють у strict mode, навіть якщо ти явно його не вмикав.

3. `this` у конструкторі

Конструктор викликається автоматично при new, і this вказує на новий екземпляр:

javascript

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

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

Якщо не викликати через new → буде помилка:

javascript

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

4. `this` при успадкуванні (extends)

Якщо клас успадковується, ти зобов'язаний викликати super() до звернення до this, інакше буде помилка.

javascript

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // створює this через батьківський конструктор
    this.breed = breed; // тепер можна використовувати this
  }
}

Якщо не викликати super():

javascript

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

5. Втрата контексту `this`

Коли метод передається як колбек, this втрачається:

javascript

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

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

const u = new User("Alice");
setTimeout(u.greet, 1000); // undefined, бо контекст втрачено

Рішення 1: Прив'язати `this` вручну

javascript

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

Рішення 2: Використати стрілкову функцію

javascript

class User {
  name = "Alice";

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

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

Стрілкові функції зберігають this із зовнішнього контексту, тому всередині класу їх часто використовують для обробників подій.

6. У статичних методах `this` вказує на сам клас

javascript

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

MathUtils.describe(); // this → MathUtils

Якщо ти успадковуєш клас:

javascript

class AdvancedMath extends MathUtils {}

AdvancedMath.describe(); // this → AdvancedMath

Тобто this у статичному методі вказує не на екземпляр, а на сам клас.

7. У приватних і стрілкових методах

javascript

class Counter {
  #count = 0;

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

const c = new Counter();
setTimeout(c.increment, 1000); // this збережено, працює коректно

Тут this не втрачається, бо стрілкова функція не створює власний this.

Підсумок

Контекст	Значення `this`
У конструкторі	Новий екземпляр класу
У звичайному методі	Об'єкт, через який викликано метод
При втраті контексту (`setTimeout(obj.method)`)	`undefined`
У стрілковому методі	Успадковується із зовнішнього контексту (не втрачається)
У статичному методі	Сам клас (не екземпляр)
До виклику `super()` у нащадку	Помилка: `this` недоступний

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.