class

Definiuje klasę, czyli szablon do tworzenia obiektów z tymi samymi polami i metodami.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

JavaScript

class Student {
  constructor(name) {
    this.name = name
    this.points = 0
  }

  addPoints(amount) {
    this.points += amount
    return this
  }
}

const ania = new Student('Ania')
ania.addPoints(50).addPoints(30)

console.log(ania)
console.log(ania instanceof Student)

Konsola

Student { name: 'Ania', points: 80 }

true

Definicja i zastosowanie

Słowo class tworzy szablon obiektów. Metoda constructor uruchamia się przy każdym new i ustawia pola nowej instancji przez this. Metody zapisane w ciele klasy trafiają do prototypu, więc wszystkie instancje korzystają z tych samych funkcji.

Klasa może dziedziczyć po innej dzięki extends. W konstruktorze klasy pochodnej trzeba wywołać super() przed pierwszym użyciem this, a super.method() wywołuje wersję metody z klasy bazowej. Pola i metody oznaczone jako static należą do samej klasy, a nie do instancji.

Pola z prefiksem # są prywatne i dostęp do nich jest możliwy tylko z wnętrza klasy. Gettery i settery (get, set) udostępniają wyliczane wartości jak zwykłe właściwości. Ciało klasy zawsze działa w trybie ścisłym, a w przeciwieństwie do deklaracji funkcji klasy nie można użyć przed linią, w której ją zadeklarowano.

Składnia

class Name {
  field = value
  #privateField = value
  static staticField = value

  constructor(param) {
    this.property = param
  }

  method() {}
  get computed() {}
  set computed(value) {}
  static staticMethod() {}
}

class Child extends Name {}

Więcej przykładów

Dziedziczenie przez extends i super

JavaScript

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

  describe() {
    return `Użytkownik ${this.name}`
  }
}

class Mentor extends User {
  constructor(name, course) {
    super(name)
    this.course = course
  }

  describe() {
    return `${super.describe()}, mentor kursu ${this.course}`
  }
}

const mentor = new Mentor('Kuba', 'React')
console.log(mentor.describe())
console.log(mentor)

Konsola

Użytkownik Kuba, mentor kursu React

Mentor { name: 'Kuba', course: 'React' }

Pole prywatne, getter i metoda statyczna

JavaScript

class Wallet {
  #coins = 0

  static withBonus(bonus) {
    const wallet = new Wallet()
    wallet.add(bonus)
    return wallet
  }

  add(amount) {
    if (amount <= 0) throw new RangeError('Kwota musi być dodatnia')
    this.#coins += amount
  }

  get balance() {
    return `${this.#coins} monet`
  }
}

const wallet = Wallet.withBonus(100)
wallet.add(25)

console.log(wallet.balance)
console.log(wallet)
console.log(Object.keys(wallet))

Konsola

125 monet

Wallet {}

[]

Pole #coins nie jest widoczne z zewnątrz ani w Object.keys(). Odczyt wallet.#coins poza klasą to błąd składni.

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

Nie zapominaj o new. Wywołanie klasy jak zwykłej funkcji, np. Student("Ania"), rzuca TypeError.
Metoda przekazana jako callback traci this, np. w button.addEventListener("click", game.start). Użyj strzałki () => game.start() albo game.start.bind(game).
Nie każdy kod potrzebuje klas. Do prostych danych wystarczy literał obiektu, a do pojedynczej operacji zwykła funkcja.

Powiązane hasła

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

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs