Як викликати статичний метод

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

Статичні методи викликають на самому класі, а не на його екземплярах: 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() працює в будь-якому контексті. Він доступний лише всередині методів класу-нащадка, а не в довільній функції.

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

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

Premium

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