If you want to master using JavaScript, you need to learn how to use Proxy API. Here is a fantastic overview of the key things you need to know to get started.
Contents
What can Proxy API do?
Proxy API aims to extend meta-programming capabilities within JavaScript. The technique of meta-programming enables you to change a program’s behavior, analyze the internal operations of programs, and even change the source code to your preference. With Proxy API, you can override JavaScript internals like enumeration, iteration, assignment, invocation, function, object property lookup, and more. And Proxy has many other uses, such as:
- Object mocking.
- Object on change events.
- Operator overloading.
- Flexible and concise API creation.
- Powering the internal reactivity system used in Vue.js 3.
Find out more about how to use Proxy API with javascript.
Key Proxy API Terminology You Need to Know
The three main Proxy API terms you need to understand are traps, handler, and target. Traps are the methods that you are overriding. A handler is an object whose properties are traps, which means you can define multiple traps onto one handler. And a target is an object whose methods you can override. A target can be any object, which means you can apply proxies to built-in objects, third-party modules, and the object itself.
Proxy API’s Role in Hiding Properties
JavaScript lacks private properties. Despite the introduction of reflective methods, the private properties of JavaScript are still discoverable publicly. Before Proxy, the convention to solve the problem was to name private properties with a leading underscore. That effectively meant they were marked as “do no touch.” But Proxy provides a better approach to unmasking properties by using the hide function. That wraps a target object and makes prefixed properties with an underscore inaccessible via other methods.
How does Proxy API work?
Basically, Proxy traps invocations and operations to its target object so it can pass through, no-op, or handle more efficiently. Proxy creates undetectable barriers around a target object so that all operations are redirected to the handler object. So, Proxy API accepts two required arguments: the target object and the handler object.
To understand how Proxy works in more detail, take a look at this example using the simplest method of one trap. If you want a get trap that always returns 24, it will look like this:
let target = {
x: 10,
y: 20
}
let handler = {
get: (obj, prop) => 24
}
target = new Proxy(target, handler)
target.x // 24
target.y // 24
target.x // 24The result of that get trap is an object that will return the desired 24 for any type of property access operation. However, Proxy traps are not limited to get operations only. The get trap is only one of the dozens of different traps, which include handler.set, handler.apply, and handler.construct.
