Oprettelse af en Proxy
Pak objekter ind for at opfange operationer.
Oprettelse af en Proxy er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad er en Proxy?
En Proxy omslutter et objekt og lader dig opfange grundlæggende handlinger som at læse, skrive og slette egenskaber.
Du opretter en med new Proxy(target, handler), hvor handleren definerer traps, der tilpasser funktionaliteten.
En tom handler
Med en tom handler opfører proxyen sig præcis som target. Alle handlinger går direkte videre.
const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});
console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);Target og proxy deler tilstand
Proxyen kopierer ikke target. De refererer til det samme underliggende objekt, så en ændring gennem den ene er synlig gennem dem begge.
const target = { count: 0 };
const proxy = new Proxy(target, {});
proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);Tilføjelse af en get-trap
get-trappen opfanger læsninger af egenskaber. Her bliver hver læsning logget, før værdien returneres.
const proxy = new Proxy({ name: 'Ada' }, {
get(target, prop) {
console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.name);Trap-parametre
get-trappen modtager target, navnet på property og receiver (proxyen). Du bestemmer, hvad der 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 egenskaber ved læsning
En get-trap kan returnere værdier, som target faktisk ikke gemmer, og beregne dem efter 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);Tilføjelse af en set-trap
set-trappen opfanger skrivninger. Du skal returnere true for at angive, at det lykkedes, ellers behandles tildelingen 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-trappen
has-trappen opfanger in-operatoren, så du kan tilpasse medlemskabstjek.
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-trappen
deleteProperty-trappen opfanger delete. Returnér true, hvis det lykkes.
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 traps til rådighed
Ud over get og set understøtter proxyer traps for has, deleteProperty, ownKeys, apply (til funktioner), construct og flere andre. Du implementerer kun dem, du har brug for.
const proxy = new Proxy({ x: 1, y: 2 }, {
ownKeys(target) {
console.log('listing keys');
return Object.keys(target);
}
});
console.log(Object.keys(proxy));Hvorfor proxyer er vigtige
Proxyer lader dig tilføje validering, logning, standardværdier og reaktivitet uden at ændre target-objektet. De driver frameworks som Vues reaktivitetssystem. I næste afsnit går du mere i dybden med get- og set-traps.
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);Hurtigt tjek
Hvad opretter new Proxy(target, handler)?
Opsummering: Oprettelse af en Proxy
Du har lært at opfange handlinger på objekter:
new Proxy(target, handler)omslutter et objekt med traps.- En tom handler sender alt direkte videre; proxy og target deler tilstand.
- Almindelige traps er:
get,set,has,deletePropertyogownKeys. - set- og delete-traps skal returnere
true, når handlingen lykkes.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Oprettelse af en Proxy” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Oprettelse af en Proxy”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Oprettelse af en Proxy”?
Pak objekter ind for at opfange operationer. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Oprettelse af en Proxy”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Oprettelse af en Proxy
- get- og set-traps
- Reflect-API'en
- Praktiske anvendelser af Proxy