JavaScript Academy · Lekcja

Pułapki get i set

Proszę dostosowywać odczytywanie i zapisywanie właściwości.

Pułapki get i set to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 4. 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 4 lekcji w sumie.

Pułapki get i set

Pułapki get i set są najczęściej używanymi punktami zaczepienia proxy. Przechwytują odczytywanie i zapisywanie właściwości, umożliwiając przekształcanie wartości, walidowanie danych wejściowych lub rejestrowanie dostępu.

Sygnatura pułapki get

get(target, property, receiver) jest uruchamiane przy każdym odczycie właściwości. Zwróć dowolną wartość, którą ma zobaczyć wywołujący.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

Wartości domyślne za pomocą get

Pułapka get może dostarczyć wartość zastępczą dla brakujących właściwości zamiast zwracać undefined.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 0;
  }
});

console.log(proxy.a);
console.log(proxy.missing);

Przekształcanie wartości przy odczycie

Pułapka get może przekształcać wartości przed ich zwróceniem, na przykład zamieniać ciągi znaków na wielkie litery.

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

Sygnatura pułapki set

set(target, property, value, receiver) jest uruchamiane przy każdym zapisie. W przypadku powodzenia musi zwrócić true, w przeciwnym razie tryb ścisły zgłosi błąd.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

Walidacja w pułapce set

Klasycznym zastosowaniem pułapki set jest walidacja: odrzucanie nieprawidłowych wartości, zanim trafią do targetu.

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

Konwersja wartości w pułapce set

Pułapka set może nie tylko odrzucać dane, ale także normalizować dane wejściowe, na przykład usuwać białe znaki z ciągów przed ich zapisaniem.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

Rejestrowanie obu operacji

Połącz get i set, aby śledzić każdy dostęp. Jest to nieocenione podczas debugowania sposobu użycia obiektu.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.v = 42;
console.log(proxy.v);

Wymuszanie tylko do odczytu

Pułapka set, która zawsze odrzuca zapisy, zmienia proxy w widok obiektu docelowego tylko do odczytu.

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

Klucze Symbol i elementy wewnętrzne

Pułapki są uruchamiane również dla kluczy symboli. Zachowaj ostrożność: rejestrowanie każdej właściwości, w tym wewnętrznych symboli, może generować dużo szumu, dlatego w razie potrzeby stosuj filtrowanie.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

Dlaczego get i set mają znaczenie

Te pułapki razem umożliwiają walidację, obliczane właściwości, wartości domyślne, rejestrowanie i reaktywność — wszystko bez modyfikowania targetu. Jednak ręczne zapisywanie target[prop] = value wewnątrz pułapek ma pewne przypadki brzegowe. Omówione dalej API Reflect obsługuje je poprawnie.

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

Szybkie sprawdzenie

Co musi zwrócić pułapka set, aby zasygnalizować pomyślne przypisanie?

Podsumowanie: pułapki get i set

Poznałeś podstawowe pułapki proxy:

get(target, prop, receiver) przechwytuje odczyty — może zwrócić dowolną wartość.
set(target, prop, value, receiver) przechwytuje zapisy — w przypadku powodzenia zwraca true.
Używaj ich do obsługi wartości domyślnych, przekształceń, walidacji i rejestrowania.
Aby poprawnie obsługiwać operacje wewnętrzne w pułapkach, używaj Reflect, które omówimy dalej.

Często zadawane pytania

Czy lekcja „Pułapki get i set” jest bezpłatna?

Tak — pełny tekst „Pułapki get i set” 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 4 lekcji w sumie.

Co nauczysz się w „Pułapki get i set”?

Proszę dostosowywać odczytywanie i zapisywanie właściwości. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Pułapki get i set”?

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

← Powrót do JavaScript Academy