Статичні властивості та методи

Ми також можемо присвоїти метод самій функції класу. Такі методи називаються статичними.

У класі перед ними стоїть ключове слово static, наприклад:

class User {
  static staticMethod() {
    alert(this === User);
  }
}

User.staticMethod(); // true

Фактично це те ж саме, що й безпосередньо присвоїти метод як властивість функції:

class User { }

User.staticMethod = function() {
  alert(this === User);
};

User.staticMethod(); // true

Значенням this при виклику User.staticMethod() Ñ” сам конструктор класу User (правило «об’єкт перед крапкою»).

Зазвичай статичні методи використовуються для реалізації функцій, які належать до класу, але не до будь-якого окремого його об’єкта.

Наприклад, у нас Ñ” об’єкти статей Article Ñ– необхідна функція для Ñ—Ñ… порівняння.

Очевидне рішення – додати метод Article.compare, наприклад:

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static compare(articleA, articleB) {
    return articleA.date - articleB.date;
  }
}

// використання
let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("CSS", new Date(2019, 0, 1)),
  new Article("JavaScript", new Date(2019, 11, 1))
];

articles.sort(Article.compare);

alert( articles[0].title ); // CSS

Тут Article.compare стоїть “над” статтями, як засіб Ñ—Ñ… порівняння. Це не метод статті, а скоріше всього класу.

Іншим прикладом може бути так званий “фабричний” метод.

Уявіть собі, нам потрібно кілька способів, щоб створити статтю:

1. Створити за заданими параметрами (title, date тощо).
2. Створити порожню статтю з сьогоднішньою датою.
3. …або якось інакше.

Перший спосіб може бути реалізований через конструктор. А для другого ми можемо використати статичний метод класу.

Такий як Article.createTodays() тут:

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static createTodays() {
    // пам’ятайте, this = Article
    return new this("Сьогоднішній дайджест", new Date());
  }
}

let article = Article.createTodays();

alert( article.title ); // Сьогоднішній дайджест

Тепер щоразу, коли нам потрібно створити сьогоднішній дайджест, ми можемо викликати Article.createToday(). Знову ж таки, це не метод конкретної статті, а метод цілого класу.

Статичні методи також використовуються в класах, що пов’язані з базою даних, для пошуку/збереження/видалення записів із бази даних, наприклад:

// припустимо, що Article -- це спеціальний клас для керування статтями
// статичний метод видалення статті:
Article.remove({id: 12345});

// ...
article.createTodays(); /// Error: article.createTodays is not a function

Статичні властивості

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

class Article {
  static publisher = "Ілля Кантор";
}

alert( Article.publisher ); // Ілля Кантор

Це те саме, що й пряме присвоєння Article:

Article.publisher = "Ілля Кантор";

Спадкування статичних властивостей і методів

Статичні властивості та методи наслідуються.

Наприклад, Animal.compare та Animal.planet у коді нижче успадковуються та доступні як Rabbit.compare та Rabbit.planet:

class Animal {
  static planet = "Земля";

  constructor(name, speed) {
    this.speed = speed;
    this.name = name;
  }

  run(speed = 0) {
    this.speed += speed;
    alert(`${this.name} біжить зі швидкістю ${this.speed}.`);
  }

  static compare(animalA, animalB) {
    return animalA.speed - animalB.speed;
  }

}

// Inherit from Animal
class Rabbit extends Animal {
  hide() {
    alert(`${this.name} ховається!`);
  }
}

let rabbits = [
  new Rabbit("Білий Кролик", 10),
  new Rabbit("Чорний Кролик", 5)
];

rabbits.sort(Rabbit.compare);

rabbits[0].run(); // Чорний Кролик біжить зі швидкістю 5.

alert(Rabbit.planet); // Земля

Тепер, коли ми викликаємо Rabbit.compare, буде викликано успадкований Animal.compare.

Як це працює? Знову ж таки, використовуючи прототипи. Як ви вже могли здогадатися, extends дає Rabbit посилання [[Prototype]] на Animal.

Отже, Rabbit extends Animal створює два посилання [[Prototype]]:

1. Функція Rabbit прототипно успадковує від функції Animal.
2. Rabbit.prototype прототипно успадковує від Animal.prototype.

В результаті успадкування працює як для звичайних, так і для статичних методів.

Перевірмо це кодом:

class Animal {}
class Rabbit extends Animal {}

// для статичних
alert(Rabbit.__proto__ === Animal); // true

// для звичайних методів
alert(Rabbit.prototype.__proto__ === Animal.prototype); // true

Підсумки

Статичні методи використовуються для функціональності, що належить до класу «в цілому». Це не стосується конкретного екземпляра класу.

Наприклад, метод порівняння Article.compare(article1, article2) або фабричний метод Article.createTodays().

Ð’ оголошенні класу вони позначені ключовим словом static.

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

Синтаксис:

class MyClass {
  static property = ...;

  static method() {
    ...
  }
}

Технічно, статичне оголошення – це те ж саме, що й присвоєння класу:

MyClass.property = ...
MyClass.method = ...

Статичні властивості та методи успадковуються.

Для class B extends A, прототип класу B вказує на A: B.[[Prototype]] = A. Тож якщо поле не знайдено в B, пошук продовжується в A.