JavaScript Academy · leksjon

Opprette en Proxy

Pakk inn objekter for å fange opp operasjoner.

Leksjon 1 av 413 trinn

Opprette en Proxy er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 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.

Hva er en Proxy?

En Proxy pakker inn et objekt og lar Dem avskjære grunnleggende operasjoner som å lese, skrive og slette egenskaper.

En Proxy opprettes med new Proxy(target, handler), der handleren definerer feller som tilpasser oppførselen.

En tom handler

Med en tom handler oppfører proxyen seg nøyaktig som målobjektet. Alle operasjoner sendes rett videre.

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

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

Målobjektet og proxyen deler tilstand

Proxyen kopierer ikke målobjektet. De refererer til det samme underliggende objektet, så en endring gjennom den ene er synlig gjennom begge.

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

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

Legge til en get-felle

get-fellen avskjærer lesing av egenskaper. Her logges hver lesing før verdien returneres.

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

console.log(proxy.name);

Felleparametere

get-fellen mottar target, navnet på property og receiver (proxyen). Det bestemmes selv hva som skal returneres.

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

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

Beregnede egenskaper ved lesing

En get-felle kan returnere verdier som målobjektet faktisk ikke lagrer, ved å beregne dem ved behov.

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

Legge til en set-felle

set-fellen avskjærer skriving. true må returneres for å signalisere at operasjonen lyktes; ellers behandles tilordningen som mislykket.

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

has-fellen

has-fellen avskjærer in-operatoren og lar Dem tilpasse medlemskapssjekker.

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

deleteProperty-fellen

deleteProperty-fellen avskjærer delete. Returner true ved suksess.

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

Mange feller tilgjengelig

I tillegg til get og set støtter proxyer feller for has, deleteProperty, ownKeys, apply (for funksjoner), construct og flere andre. Implementer bare dem som trengs.

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

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

Hvorfor Proxy er viktig

Proxyer lar Dem legge til validering, logging, standardverdier og reaktivitet uten å endre målobjektet. De driver rammeverk som Vues reaktivitetssystem. Deretter går De dypere inn i get- og set-feller.

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

Kort kontroll

Hva oppretter new Proxy(target, handler)?

Besvar den i den interaktive leksjonen

Oppsummering: Opprette en Proxy

De har lært å avskjære objektoperasjoner:

new Proxy(target, handler) pakker inn et objekt med feller.
En tom handler sender alt videre; proxyen og målobjektet deler tilstand.
Vanlige feller er get, set, has, deleteProperty og ownKeys.
Fellene for set og delete må returnere true ved suksess.

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 «Opprette en Proxy» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Opprette en 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 «Opprette en Proxy»?

Pakk inn objekter for å fange opp operasjoner. 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 1 av 4.

Hvor lang tid tar leksjonen «Opprette en 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

← Tilbake til JavaScript Academy