JavaScriptObiekty i klasy

static

Oznacza pole lub metodę należącą do samej klasy, a nie do obiektów tworzonych przez new.

Na tej stronie

Przykład

#
JavaScript
class Student {
  static count = 0

  constructor(name) {
    this.name = name
    Student.count++
  }

  static compare(a, b) {
    return a.name.localeCompare(b.name, 'pl')
  }
}

const students = [new Student('Ola'), new Student('Ania'), new Student('Łukasz')]

console.log(Student.count)
console.log(students.toSorted(Student.compare).map((student) => student.name))
console.log(students[0].count)
Konsola
3
['Ania', 'Łukasz', 'Ola']
undefined

Instancja nie ma pola count. Należy ono do klasy, więc odczytasz je tylko przez Student.count.

Definicja i zastosowanie

#

Słowo static przed polem lub metodą sprawia, że należy ona do klasy, a nie do jej instancji. Odwołujesz się do niej przez nazwę klasy, tak jak w Math.max() czy Array.from(), bez tworzenia obiektu. Instancje nie mają dostępu do składowych statycznych przez this.

Metody statyczne to dobre miejsce na funkcje związane z klasą, które nie potrzebują danych konkretnego obiektu: metody fabryczne tworzące instancje w określony sposób (Course.fromJSON()), walidatory czy funkcje porównujące dwie instancje. Pola statyczne przechowują dane wspólne dla całej klasy, np. licznik utworzonych obiektów albo stałe konfiguracyjne.

Wewnątrz metody statycznej this wskazuje na klasę, więc możesz odwoływać się do innych składowych statycznych. Są one dziedziczone przez klasy pochodne. Blok static { } uruchamia kod jeden raz, podczas definiowania klasy, np. żeby przygotować bardziej złożone pole statyczne.

Składnia

#
Składnia
class Name {
  static field = value
  static #privateField = value

  static method() {}

  static {
    // kod uruchamiany raz przy definicji klasy
  }
}

Name.method()
Name.field

Więcej przykładów

#
Metoda fabryczna
JavaScript
class Course {
  constructor(title, lessons) {
    this.title = title
    this.lessons = lessons
  }

  static fromJSON(json) {
    const data = JSON.parse(json)
    return new Course(data.title, data.lessons)
  }
}

const course = Course.fromJSON('{"title":"React","lessons":16}')
console.log(course)
console.log(course instanceof Course)
Konsola
Course { title: 'React', lessons: 16 }
true
this w metodzie statycznej i dziedziczenie
JavaScript
class Character {
  static create(name) {
    return new this(name)
  }

  constructor(name) {
    this.name = name
  }
}

class Guide extends Character {}

console.log(Character.create('Astro'))
console.log(Guide.create('Ra'))
Konsola
Character { name: 'Astro' }
Guide { name: 'Ra' }

Klasa Guide odziedziczyła metodę create(). Wywołana jako Guide.create() ma this równe Guide, więc tworzy obiekt właściwej klasy.

Blok static
JavaScript
class Levels {
  static thresholds = []

  static {
    for (let level = 1; level <= 5; level++) {
      Levels.thresholds.push(level * level * 100)
    }
  }
}

console.log(Levels.thresholds)
Konsola
[100, 400, 900, 1600, 2500]

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Jeśli metoda nie korzysta z danych instancji, zastanów się, czy nie powinna być statyczna albo zwykłą funkcją poza klasą.
  • W konstruktorze i metodach instancji odwołuj się do pola statycznego przez nazwę klasy, np. Student.count. Zapis this.count szuka pola w obiekcie, a nie w klasie.
  • Metodę statyczną używającą this przekazuj jako callback ostrożnie. Oderwana od klasy straci this, tak jak zwykłe metody.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.