0Pricing
JavaScript Academy · Lekcja

Praktyczne zastosowania Proxy

Proszę tworzyć obiekty do walidacji, rejestrowania i reaktywności.

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

Proxy w praktyce

Teraz połączysz proxy i Reflect, aby rozwiązywać rzeczywiste problemy: walidację, rejestrowanie, wartości domyślne i inne. Każdy z tych wzorców opakowuje zwykły obiekt bez jego modyfikowania.

Opakowanie walidujące

Wymuś zgodność ze schematem: odrzuć każdy zapis, który nie spełnia reguły. Target pozostaje czysty, ponieważ nieprawidłowe dane nigdy do niego nie trafiają.

function validated(obj, rules) {
  return new Proxy(obj, {
    set(target, prop, value, receiver) {
      const rule = rules[prop];
      if (rule && !rule(value)) {
        throw new TypeError('invalid value for ' + prop);
      }
      return Reflect.set(target, prop, value, receiver);
    }
  });
}

const user = validated({}, { age: v => v >= 0 });
user.age = 25;
console.log(user.age);
try { user.age = -1; } catch (e) { console.log(e.message); }

Opakowanie rejestrujące

Śledź każdy odczyt i zapis na potrzeby debugowania, po zarejestrowaniu operacji przekazując ją przez Reflect.

function logged(obj) {
  return new Proxy(obj, {
    get(t, p, r) { console.log('GET ' + p); return Reflect.get(t, p, r); },
    set(t, p, v, r) { console.log('SET ' + p + '=' + v); return Reflect.set(t, p, v, r); }
  });
}

const data = logged({ count: 0 });
data.count = 5;
console.log(data.count);

Wartości domyślne

Zwracaj wartość zastępczą dla każdej brakującej właściwości, aby odczyty nigdy nie zwracały undefined.

function withDefault(obj, fallback) {
  return new Proxy(obj, {
    get(t, p, r) {
      return p in t ? Reflect.get(t, p, r) : fallback;
    }
  });
}

const scores = withDefault({ ada: 90 }, 0);
console.log(scores.ada);
console.log(scores.unknown);

Ujemne indeksowanie tablic

Spraw, aby tablice obsługiwały ujemne indeksy w stylu Pythona, przekształcając je w pułapce get.

function negIndex(arr) {
  return new Proxy(arr, {
    get(t, p, r) {
      const i = Number(p);
      if (Number.isInteger(i) && i < 0) {
        return Reflect.get(t, t.length + i, r);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const list = negIndex(['a', 'b', 'c']);
console.log(list[-1]);
console.log(list[0]);

Widok tylko do odczytu

Udostępnij obiekt, który można odczytywać, ale nigdy modyfikować — jest to przydatne do ochrony współdzielonej konfiguracji.

function readonly(obj) {
  return new Proxy(obj, {
    set() { console.log('blocked write'); return false; },
    deleteProperty() { console.log('blocked delete'); return false; }
  });
}

const config = readonly({ apiUrl: '/api' });
config.apiUrl = '/hacked';
console.log(config.apiUrl);

Zliczanie dostępów

Śledź, ile razy odczytano każdą właściwość, przechowując liczniki poza targetem.

function counted(obj) {
  const counts = {};
  const proxy = new Proxy(obj, {
    get(t, p, r) {
      counts[p] = (counts[p] || 0) + 1;
      return Reflect.get(t, p, r);
    }
  });
  return { proxy, counts };
}

const { proxy, counts } = counted({ x: 1 });
proxy.x; proxy.x; proxy.x;
console.log(counts.x);

Obliczane właściwości wirtualne

Udostępniaj wartości pochodne, które nie są przechowywane, lecz obliczane od nowa przy każdym odczycie.

const rect = new Proxy({ width: 4, height: 3 }, {
  get(t, p, r) {
    if (p === 'area') return t.width * t.height;
    return Reflect.get(t, p, r);
  }
});

console.log(rect.area);
rect.width = 10;
console.log(rect.area);

Zgłaszanie błędów przy nieznanych odczytach

Wychwytuj literówki na wczesnym etapie, zgłaszając błąd, gdy kod odczytuje nieistniejącą właściwość.

function strict(obj) {
  return new Proxy(obj, {
    get(t, p, r) {
      if (typeof p === 'string' && !(p in t)) {
        throw new ReferenceError('unknown property: ' + p);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const o = strict({ name: 'Ada' });
console.log(o.name);
try { console.log(o.naem); } catch (e) { console.log(e.message); }

Łączenie odpowiedzialności

Rzeczywiste opakowania często łączą walidację i rejestrowanie w jednym handlerze, a każda pułapka przekazuje operację do Reflect.

const account = new Proxy({ balance: 0 }, {
  set(t, p, v, r) {
    if (p === 'balance' && v < 0) throw new RangeError('no overdraft');
    console.log(p + ' set to ' + v);
    return Reflect.set(t, p, v, r);
  }
});

account.balance = 100;
console.log(account.balance);
try { account.balance = -50; } catch (e) { console.log(e.message); }

Dlaczego te wzorce mają znaczenie

Proxy dodają zachowania przekrojowe, walidację, rejestrowanie, wartości domyślne i kontrolę dostępu bez zaśmiecania oryginalnego obiektu ani kodu, który go wywołuje. Dokładnie tak frameworki reaktywne obserwują zmiany stanu. Używaj proxy, gdy potrzebujesz przejrzystego przechwytywania operacji.

const observed = new Proxy({ n: 0 }, {
  set(t, p, v, r) {
    const ok = Reflect.set(t, p, v, r);
    console.log(p + ' is now ' + t[p]);
    return ok;
  }
});
observed.n = 1;
observed.n = 2;

Szybkie sprawdzenie

Jakiej pułapki proxy użyjesz, aby odrzucać nieprawidłowe wartości przed ich zapisaniem?

Podsumowanie: praktyczne przypadki użycia proxy

Zastosowałeś proxy do rozwiązywania rzeczywistych problemów:

  • Walidacja w pułapce set odrzuca nieprawidłowe dane.
  • Rejestrowanie śledzi odczyty i zapisy za pomocą Reflect.
  • Wartości domyślne i właściwości wirtualne są obsługiwane w pułapce get.
  • Widoki tylko do odczytu, zliczanie dostępów i rygorystyczne wykrywanie literówek w przejrzysty sposób opakowują obiekty.

Często zadawane pytania

Czy lekcja „Praktyczne zastosowania Proxy” jest bezpłatna?

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

Proszę tworzyć obiekty do walidacji, rejestrowania i reaktywnoś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 4 z 4.

Ile czasu zajmuje lekcja „Praktyczne zastosowania 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

  1. Tworzenie Proxy
  2. Pułapki get i set
  3. API Reflect
  4. Praktyczne zastosowania Proxy
← Powrót do JavaScript Academy