Summary - Proxy and Reflect
Build a wrapper that logs property access on an object using Proxy and Reflect.
Summary - Proxy and Reflect
In this group you learned to wrap an object with a Proxy and to write the get, set, has and deleteProperty traps inside a handler. Each trap intercepts one operation on the target.
Now you will combine them into a real tool: a wrapper that logs every property access on an object to the console. You will join the get and set traps with Reflect.
Exercise Write a logging proxy
Define an object named data with host and port properties. Inside a handler, write a get trap: first log the accessed property with console.log('read', prop), then return the value with Reflect.get(target, prop). Create a proxy variable with new Proxy(data, handler) and log console.log(proxy.host).
Show example solution
const data = { host: 'localhost', port: 3000 };
const handler = {
get(target, prop) {
console.log('read', prop);
return Reflect.get(target, prop);
}
};
const proxy = new Proxy(data, handler);
console.log(proxy.host);A wrapper function
A wrapper function takes any object and returns a Proxy that logs it. This way you reuse the same logging logic on many objects.
function withLog(target) {
return new Proxy(target, {
get(t, prop) {
console.log('read', prop);
return Reflect.get(t, prop);
}
});
}Here the trap parameters are named t and prop; t stands for the target object. Adding a set trap too lets you watch both reads and writes. This is a common pattern for debugging and tracing in real applications.
Exercise Write the withLog wrapper
Write a function named withLog that takes a target parameter and returns new Proxy(target, handler). The handler has get and set traps; both first log the operation with console.log ('read' for get, 'write' for set) then apply the behavior with Reflect (parameter names t, prop, value). Create a proxy variable with withLog({ name: 'Ayşe' }), assign proxy.age = 28 and log console.log(proxy.name).
Show example solution
function withLog(target) {
return new Proxy(target, {
get(t, prop) {
console.log('read', prop);
return Reflect.get(t, prop);
},
set(t, prop, value) {
console.log('write', prop);
return Reflect.set(t, prop, value);
}
});
}
const proxy = withLog({ name: 'Ayşe' });
proxy.age = 28;
console.log(proxy.name);Test yourself
-
What does Reflect.get provide inside a get trap?
- deletes the Proxy
- creates a new object
- applies the default read behavior
- deletes the property
Show answer
applies the default read behavior — Correct! Reflect.get applies the default read behavior from inside the get trap.
-
Review Proxy and Reflect concepts
- Proxy
- wraps the object
- handler
- holds traps
- Reflect
- default behavior
- get trap
- intercepts read
- set trap
- intercepts write