Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як викликати статичний метод». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Статичні методи викликають на самому класі, а не на його екземплярах: `ClassName.methodName()`.** Причина проста: `static` кладе метод на клас, тому в об'єктах, створених через `new`, його просто немає.

## Теорія

### TL;DR

- Правильно: `User.sayHi()`. Неправильно: `new User().sayHi()`, це `TypeError`.
- Усередині іншого статичного методу працює `this.otherStatic()`, бо `this`, це клас.
- Зі звичайного методу статику видно тільки через ім'я класу: `User.hello()`.
- `extends` успадковує і звичайні, і статичні методи, тому `Dog.info()` працює.
- Нащадок може викликати батьківську реалізацію через `super.describe()`.
- Типове застосування, фабричні методи на кшталт `User.createGuest()`.

### Швидкий приклад

```javascript
class User {
  static sayHi() {
    console.log('Привіт від класу User!');
  }
}

// Правильно:
User.sayHi(); // Привіт від класу User!

// Неправильно:
const u = new User();
u.sayHi(); // TypeError: u.sayHi is not a function
```

Причина: статичні методи належать **самому класу**, а не об'єктам, створеним за допомогою `new`.

### Синтаксис виклику і параметри

Статичний метод приймає аргументи так само, як звичайний, просто викликається на класі:

```javascript
class MathUtils {
  static sum(a, b) {
    return a + b;
  }
}

console.log(MathUtils.sum(3, 5)); // 8
```

> Тут `MathUtils.sum()` викликається напряму через ім'я класу, створювати екземпляр не треба.

### Виклик статичного методу всередині класу

Статичний метод можна викликати:

- через ім'я класу (`User.someMethod()`),
- через `this` усередині інших статичних методів,
- але не через `this` з екземпляра.

```javascript
class User {
  static hello() {
    console.log('Привіт!');
  }

static greetAll() {
    this.hello(); // працює, бо this = сам клас
  }

sayHi() {
    // Не можна викликати static звідси напряму:
    // this.hello(); // TypeError
    User.hello(); // а так можна, через ім'я класу
  }
}

const u = new User();

User.greetAll(); // Привіт!
u.sayHi();       // Привіт!
```

Замість жорсткого `User.hello()` у звичайному методі часто пишуть `this.constructor.hello()`, тоді нащадок зможе перевизначити статику.

### Успадкування та виклик через super

Якщо клас **наслідує** інший через `extends`, він теж отримує доступ до статичних методів батька:

```javascript
class Animal {
  static info() {
    console.log('Це тварина');
  }
}

class Dog extends Animal {}

Dog.info(); // 'Це тварина'
```

> `extends` успадковує **і звичайні**, і **статичні** методи.

Якщо нащадок перевизначає статику, батьківську реалізацію викликають через `super`:

```javascript
class Animal {
  static describe() {
    console.log('Тварина');
  }
}

class Dog extends Animal {
  static describe() {
    super.describe(); // викликає Animal.describe()
    console.log('Собака');
  }
}

Dog.describe();
// Тварина
// Собака
```

### Реальний приклад: фабричний метод

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

static createGuest() {
    return new User('Гість', 'guest');
  }
}

const guest = User.createGuest(); // виклик статичного методу
console.log(guest); // { name: 'Гість', role: 'guest' }
```

Тут `User.createGuest()` повертає **новий екземпляр**, але сам метод належить класу, а не об'єкту.

Підсумок, звідки статичний метод видно:

| Звідки викликаємо | Приклад | Працює? |
| --- | --- | --- |
| На класі | `User.sayHi()` | Так |
| На екземплярі | `new User().sayHi()` | Ні |
| Усередині іншого `static` | `this.otherStatic()` | Так |
| Усередині звичайного методу | `ClassName.staticMethod()` | Так |
| У нащадка через `super` | `super.staticMethod()` | Так |

### Типові помилки

- **Викликати статику на екземплярі.** `new User().sayHi()` кине `TypeError: u.sayHi is not a function`.
- **Писати `this.staticMethod()` у звичайному методі.** Там `this`, це екземпляр, статики в ньому немає. Потрібне `ClassName.staticMethod()` або `this.constructor.staticMethod()`.
- **Відривати метод від класу.** `const f = Counter.increment; f();` втрачає `this`, тож потрібен `bind` або стрілкова обгортка.
- **Забувати про `super` у перевизначеній статиці.** Без нього логіка батька просто не виконається.
- **Вважати, що `super.method()` працює в будь-якому контексті.** Він доступний лише всередині методів класу-нащадка, а не в довільній функції.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати587 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.