ES6+advanced
Proxy and Reflect
Meta-programming APIs that let you intercept and customize fundamental object operations like property access, assignment, and deletion.
Proxy and Reflect are meta-programming APIs that let you intercept and customize what normally happens for fundamental operations on an object — reading a property, assigning one, deleting one — rather than accepting default behavior unconditionally. They underpin how libraries like Vue 3's reactivity system work internally.
A Proxy is like a building's front desk intercepting every visitor before they reach a tenant's office: the desk can log every visit, refuse certain packages, or wave the visitor straight through to the real office exactly as if the desk weren't there.
Key Concepts
1
A Proxy wraps a target object with a handler object containing 'traps' — functions corresponding to specific operations like get, set, has, and deleteProperty — that intercept and customize that operation's behavior. A get trap can log every access or return a computed value; a set trap can validate an assigned value before allowing the write.
2
Reflect is a companion object providing the same fundamental operations as static methods, mirroring exactly what a Proxy's traps intercept. Its primary use is inside trap implementations: calling Reflect.get(target, prop, receiver) correctly forwards the operation with proper receiver semantics, more robust than manually reimplementing that forwarding logic.
3
A practical use case is reactive state systems: wrapping a plain object in a Proxy whose set trap notifies subscribers whenever a property changes, which is how Vue 3 replaced Vue 2's Object.defineProperty-based approach, since Proxies can intercept operations defineProperty cannot observe, like adding an entirely new property.