JavaScript Academy · Lekcja

Pola klas, prywatne pola # i elementy static

Tworzenie klas z polami publicznymi, ukrywanie danych za pomocą prywatnych pól # oraz dodawanie właściwości i metod static

Lekcja 1 z 38 kroki

Pola klas, prywatne pola # i elementy static to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Dlaczego klasy?

Cel: Budować małe i przejrzyste klasy.

  • Publiczne pola i metody
  • Pola #private do ukrywania stanu
  • Właściwości i metody static jako pomocnicze elementy na poziomie klasy
  • Utrzymywać przykłady małe i czytelne
Pola klas, prywatne pola # i elementy static — ilustracja 1

Publiczne pola i konstruktor

Utworzyć klasę z publicznym polem i małymi metodami; dla początkujących logika powinna pozostać prosta.

// Public fields and a simple method
class Counter {
  // public field with default
  value = 0;

  constructor(start) {
    // use a default if start is not provided
    this.value = Number.isFinite(start) ? start : 0;
  }

  inc() {
    this.value = this.value + 1;
  }
}

const c1 = new Counter(2);
c1.inc();
console.log("value:", c1.value); // 3
Pola klas, prywatne pola # i elementy static — ilustracja 2

Pola prywatne #

Pola #private są wymuszane przez język i można ich używać wyłącznie wewnątrz treści klasy. W razie potrzeby udostępnić metody odczytu.

// Private # fields hide internal state
class SafeCounter {
  // private field (only inside the class)
  #value = 0;

  constructor(start) {
    this.#value = Number.isFinite(start) ? start : 0;
  }

  inc() { this.#value = this.#value + 1; }
  getValue() { return this.#value; } // expose via method
}

const sc = new SafeCounter(5);
sc.inc();
console.log("safe value:", sc.getValue());

// External access fails (uncommenting the next line would throw):
// console.log(sc.#value);
Pola klas, prywatne pola # i elementy static — ilustracja 3

Gettery do bezpiecznego odczytu

Getter może zwracać wartość pochodną lub zweryfikowaną, zachowując pole jako prywatne.

// Getters provide read-only views; simple guard logic
class User {
  #name = "Anonymous";
  constructor(name) {
    if (typeof name === "string" && name.trim().length > 0) {
      this.#name = name.trim();
    }
  }
  get name() {
    return this.#name;
  }
}

const u = new User(" Ayla ");
console.log("name:", u.name);
Pola klas, prywatne pola # i elementy static — ilustracja 4

Elementy static

Elementy static wywołuje się na klasie (np. MathHelp.circleArea()), a nie na instancjach.

// Static = belongs to the class, not to instances
class MathHelp {
  static PI = 3.14159;
  static circleArea(r) {
    if (!(typeof r === "number" && r >= 0)) return 0;
    return MathHelp.PI * r * r;
  }
}

console.log("PI:", MathHelp.PI);
console.log("area r=2:", MathHelp.circleArea(2));

// Instances do not have the static members:
const mh = new MathHelp();
console.log("instance has PI?", "PI" in mh); // false
Pola klas, prywatne pola # i elementy static — ilustracja 5

Nawyki przyjazne początkującym

Wskazówki:

  • Preferować małe klasy z niewielką liczbą jasnych metod.
  • Używać #private do zapewnienia rzeczywistej prywatności; podkreślenia są tylko konwencją nazewniczą.
  • Umieszczać stałe i narzędzia pomocnicze w elementach static.
  • W razie potrzeby udostępniać z zewnątrz tylko minimalny zestaw metod odczytu (getterów).
Pola klas, prywatne pola # i elementy static — ilustracja 6

Quiz: podstawy pól prywatnych

Szybkie sprawdzenie: Pola #private.

Pola klas, prywatne pola # i elementy static — ilustracja 7

Podsumowanie

Podsumowanie: Używać publicznych pól do przechowywania prostego stanu, #private do ukrywania szczegółów wewnętrznych oraz static do definiowania elementów pomocniczych na poziomie klasy. Każdą klasę utrzymywać małą i łatwą do odczytania.

Pola klas, prywatne pola # i elementy static — ilustracja 8
Bezpłatny start

Ucz się JavaScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
59
Lekcje
200

Często zadawane pytania

Czy lekcja „Pola klas, prywatne pola # i elementy static” jest bezpłatna?

Tak — pełny tekst „Pola klas, prywatne pola # i elementy static” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Pola klas, prywatne pola # i elementy static”?

Tworzenie klas z polami publicznymi, ukrywanie danych za pomocą prywatnych pól # oraz dodawanie właściwości i metod static Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Pola klas, prywatne pola # i elementy static”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Pola klas, prywatne pola # i elementy static
  2. Dziedziczenie, super i sytuacje, w których lepsza jest kompozycja
  3. Mixiny (przedsmak) — proste współdzielenie bez głębokich hierarchii
← Powrót do JavaScript Academy