Een Proxy maken
Wikkel objecten in om bewerkingen te onderscheppen.
Een Proxy maken is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat is een Proxy?
Een Proxy omsluit een object en laat je fundamentele bewerkingen zoals eigenschappen lezen, schrijven en verwijderen onderscheppen.
Je maakt er een met new Proxy(target, handler), waarbij de handler traps definieert die het gedrag aanpassen.
Een lege handler
Met een lege handler gedraagt de proxy zich precies als het doelobject. Elke bewerking wordt rechtstreeks doorgestuurd.
const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});
console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);Target en Proxy delen status
De proxy kopieert de target niet. Ze verwijzen naar hetzelfde onderliggende object, dus is een wijziging via de ene ook zichtbaar in de andere.
const target = { count: 0 };
const proxy = new Proxy(target, {});
proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);Een get-trap toevoegen
De get-trap onderschept het lezen van eigenschappen. Hier wordt elke leesbewerking geregistreerd voordat de waarde wordt teruggegeven.
const proxy = new Proxy({ name: 'Ada' }, {
get(target, prop) {
console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.name);Parameters van de trap
De get-trap ontvangt de target, de naam van de property en de receiver (de proxy). Je bepaalt wat je teruggeeft.
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
return prop in target ? target[prop] : 'missing';
}
});
console.log(proxy.a);
console.log(proxy.b);Berekende eigenschappen bij het lezen
Een get-trap kan waarden teruggeven die de target niet daadwerkelijk opslaat, door ze direct te berekenen.
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);Een set-trap toevoegen
De set-trap onderschept schrijfbewerkingen. Je moet true teruggeven om succes aan te geven, anders wordt de toewijzing als mislukt beschouwd.
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);De has-trap
De has-trap onderschept de operator in, zodat je kunt aanpassen hoe wordt gecontroleerd of iets aanwezig is.
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);De deleteProperty-trap
De deleteProperty-trap onderschept delete. Geef true terug bij succes.
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));Veel traps beschikbaar
Naast get en set ondersteunen proxies traps voor has, deleteProperty, ownKeys, apply (voor functies), construct en meer. Je implementeert alleen de traps die je nodig hebt.
const proxy = new Proxy({ x: 1, y: 2 }, {
ownKeys(target) {
console.log('listing keys');
return Object.keys(target);
}
});
console.log(Object.keys(proxy));Waarom Proxy's belangrijk zijn
Met proxies kun je validatie, registratie, standaardwaarden en reactiviteit toevoegen zonder het doelobject te wijzigen. Ze vormen de basis van frameworks zoals het reactiviteitssysteem van Vue. Hierna ga je dieper in op get- en 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);Korte controle
Wat maakt new Proxy(target, handler) aan?
Samenvatting: een Proxy maken
Je hebt geleerd hoe je objectbewerkingen onderschept:
new Proxy(target, handler)omsluit een object met traps.- Een lege handler stuurt alles door; proxy en target delen status.
- Veelgebruikte traps zijn
get,set,has,deletePropertyenownKeys. - set- en delete-traps moeten bij succes
trueteruggeven.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Een Proxy maken” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Een Proxy maken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Een Proxy maken”?
Wikkel objecten in om bewerkingen te onderscheppen. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Een Proxy maken”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.