Handler Traps Reference
A Proxy wraps an object and intercepts operations via handler traps. Each trap corresponds to an internal method. Click a trap to see its signature and try it live.
All 13 Traps — Click to Fire
Trap Fire Log
Trap Details
Click a trap card above
Reflect API
Reflect provides static methods matching each Proxy trap. They provide a clean way to forward operations in trap handlers and replace some older
Object methods.Reflect Methods
Output
Observable Objects
Use Proxy
set trap to detect property changes and notify watchers — a fundamental pattern for reactive frameworks.Controls
Code
function observable(target, callback) {
return new Proxy(target, {
set(obj, prop, value) {
const old = obj[prop];
obj[prop] = value;
callback({ type: 'set', prop, old, value });
return true;
},
deleteProperty(obj, prop) {
const old = obj[prop];
delete obj[prop];
callback({ type: 'delete', prop, old });
return true;
}
});
}
Change Events
Validation Proxy
Enforce type constraints and value ranges at the proxy level. Invalid assignments are rejected before they reach the target object.
Schema: User { name: string, age: number(0-150), email: string(contains @) }
Validation Log
Logging / Debugging Proxy
Wrap any object to log every interaction. Useful for debugging complex data flow without modifying the original code.
Interactive Object
Intercepted Operations
Default Values Proxy
Return default values for missing properties instead of
undefined. Useful for configuration objects with fallbacks.Demo
Output
Negative Array Index
Python-style negative indexing for arrays:
arr[-1] returns the last element, arr[-2] the second-to-last, etc.Interactive Array: ["a", "b", "c", "d", "e"]
Code
function negativeArray(arr) {
return new Proxy(arr, {
get(target, prop, receiver) {
const index = Number(prop);
if (Number.isInteger(index) && index < 0) {
prop = String(target.length + index);
}
return Reflect.get(target, prop, receiver);
}
});
}
const arr = negativeArray(["a", "b", "c", "d", "e"]);
arr[-1] // "e"
arr[-2] // "d"
Output
Revocable Proxy
Proxy.revocable() returns { proxy, revoke }. After calling revoke(), any operation on the proxy throws a TypeError. Useful for access control and cleanup.Interactive Demo
Log