JavaScript Academy · leksjon

Praktiske bruksområder for Proxy

Bygg validerende, loggende og reaktive objekter.

Leksjon 4 av 413 trinn

Praktiske bruksområder for Proxy er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Proxyer i praksis

Nå kombineres proxyer og Reflect for å løse reelle problemer: validering, logging, standardverdier og mer. Hvert mønster pakker inn et vanlig objekt uten å endre det.

Valideringsomslag

Håndhev et skjema: avvis all skriving som bryter en regel. Målobjektet forblir rent fordi ugyldige data aldri lagres.

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); }

Loggingsomslag

Spor all lesing og skriving for feilsøking ved å videresende gjennom Reflect etter loggingen.

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);

Standardverdier

Returner en reserveverdi for alle manglende egenskaper, slik at lesinger aldri gir 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);

Negativ array-indeksering

La arrayer støtte negative indekser i Python-stil ved å oversette dem i en get-felle.

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]);

Skrivebeskyttet visning

Eksponer et objekt som kan leses, men aldri skrives til. Dette er nyttig for å beskytte delt konfigurasjon.

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);

Telle tilganger

Følg med på hvor mange ganger hver egenskap leses, ved å lagre antallene utenfor målobjektet.

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);

Beregnede virtuelle egenskaper

Eksponer avledede verdier som ikke lagres, men beregnes på nytt ved hver lesing.

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);

Kaste feil ved ukjente lesinger

Oppdag skrivefeil tidlig ved å kaste en feil når kode leser en egenskap som ikke finnes.

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); }

Kombinere hensyn

Reelle omslag kombinerer ofte validering og logging i én handler, der hver felle videresender til 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); }

Hvorfor disse mønstrene er viktige

Proxyer legger til tverrgående oppførsel, validering, logging, standardverdier og tilgangskontroll uten å forurense det opprinnelige objektet eller kallereferansene. Det er nøyaktig slik reaktive rammeverk observerer tilstandsendringer. Bruk proxyer når det trengs transparent avskjæring.

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;

Kort kontroll

Hvilken proxy-felle brukes for å avvise ugyldige verdier før de lagres?

Besvar den i den interaktive leksjonen

Oppsummering: Praktiske bruksområder for Proxy

De har brukt proxyer på reelle problemer:

Validering i set-fellen avviser ugyldige data.
Logging sporer lesinger og skrivinger via Reflect.
Standardverdier og virtuelle egenskaper hører hjemme i get-fellen.
Skrivebeskyttede visninger, telling av tilganger og streng kontroll av skrivefeil pakker alle inn objekter på en transparent måte.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Praktiske bruksområder for Proxy» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Praktiske bruksområder for Proxy», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Praktiske bruksområder for Proxy»?

Bygg validerende, loggende og reaktive objekter. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Praktiske bruksområder for Proxy»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Opprette en Proxy
get- og set-feller
Reflect-API-et
Praktiske bruksområder for Proxy

← Tilbake til JavaScript Academy