JS властивість Class.static

Загальний опис

Static у JavaScript є ключовим словом, що визначає статичні методи та властивості для класів. Ці елементи стають доступними на рівні самого класу, а не на рівні його екземплярів.

Static використовується для додавання методів і властивостей, які мають відношення безпосередньо до самого класу, а не до об'єктів, створених на його основі. Це може бути корисним, наприклад, для створення утилітарних функцій або констант, які не повинні змінюватися між екземплярами класу.

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

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

class MathUtil {
   static sum(a, b) {
       return a + b;
   }
}
// Виклик статичного методу
console.log(MathUtil.sum(1, 2)); // 3

У цьому прикладі ми створили статичний метод sum для класу MathUtil. Цей метод може бути викликаним без створення екземпляра класу.

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

class Circle {
   static PI = 3.14159;
}
console.log(Circle.PI); // 3.14159

У цьому прикладі ми використовуємо статичну властивість PI для зберігання значення числа π.

правити

Нотатка

На відміну від звичайних методів та властивостей, статичні не можуть бути перевизначені в підкласах за замовчуванням. Вони також не мають доступу до ключового слова this всередині своєї області видимості, так як this зазвичай вказує на екземпляр класу, а статичні методи та властивості не пов'язані з конкретним екземпляром.

автор: Bond правити

Нотатка

Хоча статичні методи та властивості є частиною мови програмування JavaScript, їх не завжди рекомендується використовувати. Вони можуть зробити код менш гнучким, особливо якщо є потреба в подальших змінах або розширеннях.

Однак, якщо ви знаєте, що деяка функція або значення залишиться незмінним на рівні класу, static може бути корисним інструментом для оптимізації вашого коду. Якщо у вас є клас, який виконує певний набір операцій і не потребує зберігання стану, такі як математичні операції, тоді статичні методи можуть бути ідеальним вибором.

class MathUtil {
    static sum(a, b) {
        return a + b;
    }
}

У цьому прикладі метод sum не залежить від якогось внутрішнього стану класу, тому він ідеально підходить для використання як статичний.

автор: Bond правити

Нотатка

Досвідчені розробники можуть ефективно комбінувати використання статичних методів та властивостей з динамічними. Це може бути корисно, наприклад, коли ви хочете мати загальні (статичні) налаштування для класу, які можна перевизначити на рівні екземпляра.

class ConfigurableComponent {
   static defaultConfig = {
       color: 'blue',
       size: 'medium'
   };

   constructor(config = {}) {
       this.config = {...ConfigurableComponent.defaultConfig, ...config};
   }
}

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

class ClassWithStatic {
  static staticField;
  static staticFieldWithInitializer = value;
  static staticMethod() {
    // …
  }
}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	49	45	9	36	13

Підтримка: мобільні переглядачі

Переглядач
	49	49	45	9

Підтримка: серверні переглядачі

Переглядач
	6.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

// Оголошення класу MathUtils зі статичним методом square
class MathUtils {
  static square(x) {
    return x * x;
  }
}

// Використання статичного методу без створення екземпляра класу
console.log(MathUtils.square(4)); // Виведе 16

// Оголошення класу Config зі статичною властивістю defaultSettings
class Config {
  static defaultSettings = {
    language: "en",
    theme: "light",
  };

  constructor(customSettings) {
    this.settings = { ...Config.defaultSettings, ...customSettings };
  }
}

// Створення нового екземпляра класу з власними налаштуваннями
const myConfig = new Config({ theme: "dark" });

// Виведення об'єкта з налаштуваннями
console.log(myConfig.settings); // Виведе { language: 'en', theme: 'dark' }