JavaScript Academy · Lekcja

Tworzenie Proxy

Proszę opakowywać obiekty, aby przechwytywać operacje.

Tworzenie Proxy to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 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.

Czym jest Proxy?

Proxy opakowuje obiekt i pozwala przechwytywać podstawowe operacje, takie jak odczytywanie, zapisywanie i usuwanie właściwości.

Tworzysz go za pomocą new Proxy(target, handler), gdzie handler definiuje pułapki dostosowujące zachowanie.

Pusty handler

Przy pustym handlerze proxy zachowuje się dokładnie tak samo jak obiekt docelowy. Każda operacja jest przekazywana bezpośrednio dalej.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

Target i proxy współdzielą stan

Proxy nie kopiuje obiektu target. Oba odwołują się do tego samego obiektu bazowego, więc zmiana dokonana za pośrednictwem jednego jest widoczna w drugim.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

Dodawanie pułapki get

Pułapka get przechwytuje odczyty właściwości. W tym przypadku każdy odczyt jest rejestrowany przed zwróceniem wartości.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

Parametry pułapki

Pułapka get otrzymuje obiekt target, nazwę property oraz receiver (proxy). To Ty decydujesz, co zwrócić.

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

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

Obliczane właściwości przy odczycie

Pułapka get może zwracać wartości, których target faktycznie nie przechowuje, obliczając je na bieżąco.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

Dodawanie pułapki set

Pułapka set przechwytuje zapisy. Musisz zwrócić true, aby zasygnalizować powodzenie, w przeciwnym razie przypisanie zostanie uznane za nieudane.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

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

Pułapka has

Pułapka has przechwytuje operator in, umożliwiając dostosowanie sprawdzania przynależności.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

Pułapka deleteProperty

Pułapka deleteProperty przechwytuje operator delete. W przypadku powodzenia zwróć true.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

Dostępnych jest wiele pułapek

Oprócz get i set proxy obsługuje pułapki dla has, deleteProperty, ownKeys, apply (dla funkcji), construct i nie tylko. Implementujesz tylko te, których potrzebujesz.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

Dlaczego proxy mają znaczenie

Proxy pozwalają dodawać walidację, rejestrowanie, wartości domyślne i reaktywność bez zmieniania obiektu docelowego. Są podstawą systemu reaktywności frameworków takich jak Vue. Następnie dokładniej poznasz pułapki get i set.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

Szybkie sprawdzenie

Co tworzy wyrażenie new Proxy(target, handler)?

Podsumowanie: tworzenie Proxy

Dowiedziałeś się, jak przechwytywać operacje na obiektach:

new Proxy(target, handler) opakowuje obiekt za pomocą pułapek.
Pusty handler przekazuje wszystko dalej, a proxy i target współdzielą stan.
Typowe pułapki to: get, set, has, deleteProperty, ownKeys.
Pułapki set i delete muszą zwracać true w przypadku powodzenia.

Często zadawane pytania

Czy lekcja „Tworzenie Proxy” jest bezpłatna?

Tak — pełny tekst „Tworzenie Proxy” 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 „Tworzenie Proxy”?

Proszę opakowywać obiekty, aby przechwytywać operacje. Ć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 4.

Ile czasu zajmuje lekcja „Tworzenie Proxy”?

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