Skapa en Proxy
Omslut objekt för att fånga upp operationer.
Skapa en Proxy är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad är en Proxy?
En Proxy omsluter ett objekt och låter Er fånga upp grundläggande operationer som att läsa, skriva och ta bort egenskaper.
Ni skapar en med new Proxy(target, handler), där handlern definierar traps som anpassar beteendet.
En tom handler
Med en tom handler fungerar proxyn exakt som target. Alla operationer passerar rakt igenom.
const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});
console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);Target och Proxy delar tillstånd
Proxyn kopierar inte target. De refererar till samma underliggande objekt, så en ändring via den ena syns i den andra.
const target = { count: 0 };
const proxy = new Proxy(target, {});
proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);Lägga till en get-trap
get-trapen fångar upp läsningar av egenskaper. Här loggas varje läsning innan värdet returneras.
const proxy = new Proxy({ name: 'Ada' }, {
get(target, prop) {
console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.name);Trap-parametrar
get-trapen tar emot target, egenskapsnamnet property och receiver (proxyn). Ni bestämmer vad som ska returneras.
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
return prop in target ? target[prop] : 'missing';
}
});
console.log(proxy.a);
console.log(proxy.b);Beräknade egenskaper vid läsning
En get-trap kan returnera värden som target faktiskt inte lagrar, genom att beräkna dem direkt vid 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);Lägga till en set-trap
set-trapen fångar upp skrivningar. Ni måste returnera true för att signalera att operationen lyckades, annars behandlas tilldelningen som misslyckad.
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-trapen
has-trapen fångar upp operatorn in och låter Er anpassa medlemskontroller.
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-trapen
deleteProperty-trapen fångar upp delete. Returnera true om operationen lyckas.
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));Många traps tillgängliga
Utöver get och set stöder proxies traps för has, deleteProperty, ownKeys, apply (för funktioner), construct och mycket mer. Ni implementerar bara de traps Ni behöver.
const proxy = new Proxy({ x: 1, y: 2 }, {
ownKeys(target) {
console.log('listing keys');
return Object.keys(target);
}
});
console.log(Object.keys(proxy));Varför proxies spelar roll
Proxies låter Er lägga till validering, loggning, standardvärden och reaktivitet utan att ändra target-objektet. De utgör grunden för ramverk som Vues reaktivitetssystem. Härnäst fördjupar Ni Er i get- och 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);Snabbtest
Vad skapar new Proxy(target, handler)?
Sammanfattning: Skapa en Proxy
Ni har lärt er att fånga upp objektoperationer:
new Proxy(target, handler)omsluter ett objekt med traps.- En tom handler släpper igenom allt; proxy och target delar tillstånd.
- Vanliga traps är
get,set,has,deletePropertyochownKeys. - set- och delete-traps måste returnera
truevid framgång.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Skapa en Proxy” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Skapa en Proxy”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skapa en Proxy”?
Omslut objekt för att fånga upp operationer. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Skapa en Proxy”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.