The Proxy and Reflect objects allow you to intercept and define custom behavior for fundamental language operations (e.g. property lookup, assignment, enumeration, function invocation, etc.). With the help of these two objects you are able to program at the meta level of JavaScript.
Proxies
Proxy objects allow you to intercept certain operations and to implement custom behaviors.
For example, getting a property on an object:
const handler = {
get(target, name) {
return name in target ? target[name] : 42;
},
};
const p = new Proxy({}, handler);
p.a = 1;
console.log(p.a, p.b); // 1, 42
The Proxy
object defines a target
(an empty object here) and a handler
object, in which a get
trap is implemented. Here, an object that is proxied will not return undefined
when getting undefined properties, but will instead return the number 42
.
Additional examples are available on the Proxy reference page.
Terminology
The following terms are used when talking about the functionality of proxies.
- handler
- : Placeholder object which contains traps.
- traps
- : The methods that provide property access. (This is analogous to the concept of traps in operating systems.)
- target
- : Object which the proxy virtualizes. It is often used as storage backend for the proxy. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.
- invariants
- : Semantics that remain unchanged when implementing custom operations are called invariants. If you violate the invariants of a handler, a TypeError will be thrown.
Handlers and traps
The following table summarizes the available traps available to Proxy
objects. See the reference pages for detailed explanations and examples.
Handler / trap | Interceptions | Invariants |
---|---|---|
[handler.getPrototypeOf()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf) |
[Object.getPrototypeOf](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/getPrototypeOf) [Reflect.getPrototypeOf](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/getPrototypeOf) [__proto__](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/proto) [Object.prototype.isPrototypeOf](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/isPrototypeOf) [instanceof](/~bremner/teaching/cs2613/books/mdn/Reference/Operators/instanceof) |
|
[handler.setPrototypeOf()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf) |
[Object.setPrototypeOf](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/setPrototypeOf) [Reflect.setPrototypeOf](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/setPrototypeOf) |
If target is not extensible, the
prototype parameter must be the same value as
Object.getPrototypeOf(target) .
|
[handler.isExtensible()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/isExtensible) |
[Object.isExtensible](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/isExtensible) [Reflect.isExtensible](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/isExtensible) |
Object.isExtensible(proxy) must return the same
value as Object.isExtensible(target) .
|
[handler.preventExtensions()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/preventExtensions) |
[Object.preventExtensions](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/preventExtensions) [Reflect.preventExtensions](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/preventExtensions) |
Object.preventExtensions(proxy) only returns
true if
Object.isExtensible(proxy) is
false .
|
[handler.getOwnPropertyDescriptor()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor) |
[Object.getOwnPropertyDescriptor](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/getOwnPropertyDescriptor) [Reflect.getOwnPropertyDescriptor](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor) |
|
[handler.defineProperty()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/defineProperty) |
[Object.defineProperty](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/defineProperty) [Reflect.defineProperty](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/defineProperty) |
|
[handler.has()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/has) |
|
|
[handler.get()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/get) |
|
|
[handler.set()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/set) |
|
|
[handler.deleteProperty()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/deleteProperty) |
|
A property cannot be deleted if it exists as a non-configurable own
property of target .
|
[handler.ownKeys()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/ownKeys) |
[Object.getOwnPropertyNames](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/getOwnPropertyNames) [Object.getOwnPropertySymbols](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/getOwnPropertySymbols) [Object.keys](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Object/keys) [Reflect.ownKeys](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/ownKeys) |
|
[handler.apply()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/apply) |
proxy(..args) [Function.prototype.apply](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Function/apply) and [Function.prototype.call](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Function/call) [Reflect.apply](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/apply) |
There are no invariants for the
handler.apply method.
|
[handler.construct()](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Proxy/Proxy/construct) |
new proxy(...args) [Reflect.construct](/~bremner/teaching/cs2613/books/mdn/Reference/Global_Objects/Reflect/construct) |
The result must be an Object . |
Revocable Proxy
The Proxy.revocable method is used to create a revocable Proxy
object. This means that the proxy can be revoked via the function revoke
and switches the proxy off.
Afterwards, any operation on the proxy leads to a TypeError.
const revocable = Proxy.revocable(
{},
{
get(target, name) {
return `<span class="createlink">${name}</span>`;
},
},
);
const proxy = revocable.proxy;
console.log(proxy.foo); // "<span class="createlink">foo</span>"
revocable.revoke();
console.log(proxy.foo); // TypeError: Cannot perform 'get' on a proxy that has been revoked
proxy.foo = 1; // TypeError: Cannot perform 'set' on a proxy that has been revoked
delete proxy.foo; // TypeError: Cannot perform 'deleteProperty' on a proxy that has been revoked
console.log(typeof proxy); // "object", typeof doesn't trigger any trap
Reflection
Reflect is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of the proxy handler's.
Reflect
is not a function object.
Reflect
helps with forwarding default operations from the handler to the target
.
With Reflect.has for example, you get the in
operator as a function:
Reflect.has(Object, "assign"); // true
A better apply() function
Before Reflect
, you typically use the Function.prototype.apply method to call a function with a given this
value and arguments
provided as an array (or an array-like object).
Function.prototype.apply.call(Math.floor, undefined, [1.75]);
With Reflect.apply this becomes less verbose and easier to understand:
Reflect.apply(Math.floor, undefined, [1.75]);
// 1
Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
// "hello"
Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index;
// 4
Reflect.apply("".charAt, "ponies", [3]);
// "i"
Checking if property definition has been successful
With Object.defineProperty, which returns an object if successful, or throws a TypeError otherwise, you would use a try...catch block to catch any error that occurred while defining a property. Because Reflect.defineProperty returns a Boolean success status, you can just use an if...else block here:
if (Reflect.defineProperty(target, property, attributes)) {
// success
} else {
// failure
}