Search for a command to run...
An overview of what a Proxy is, how it works, and why it exists.
i'm trav
i've also been known to make music
No comments yet. Be the first to comment.
I've always been intrigued by browser extensions and their ability to do crazy things and make the web cooler + get rid of ads. That said, going from concept to a working Chrome extension can be super annoying with repetitive setup tasks, configurati...
This is going to be a "quick" little guide to customizing the tmux status bar to include a scrolling Spotify “Now Playing” widget. I’m going to be doing this on macOS, but you should be able to adapt it to Linux and I'll try to assist where I can. If...
Go From Freelancer to Corporate Sellout In 43 Easy Steps
An overview of one of the most popular and loved programming languages.
The Importance of Mental Health as a Developer
If you're looking to dive in to some more advanced JavaScript concepts, the Proxy API is a great place to start! Proxies give you the ability to control how properties are accessed on objects, including getting, setting, and deleting values. In addition, you can use proxies to implement custom behavior for common operations like iteration and assignment.
Proxies are a relatively new feature in JavaScript, and provides a way to create "virtual" objects that can intercept property accesses and perform custom operations.
A Proxy is like a middle-man who can sit between you and the thing you're trying to access. You can tell the Proxy what you want to do, and it can either do it for you, stop you from doing it, or do something else entirely.
In JavaScript, objects can have properties that are themselves objects. For example, you might have an object with a property named "foo" that contains another object:
var obj = {
foo: {
// ...
}
};
Proxies provide a way to intercept these property accesses and perform custom operations. In the above example, we could use a proxy to intercept calls to obj.foo and do something else instead:
const proxy = new Proxy(obj, {
get: function(target, property, receiver) {
if (property == "foo") {
// ... do something else
} else {
// return the default behavior
return Reflect.get(target, property, receiver);
}
}
});
In this case, we intercept calls to get (which is used to retrieve a property value) and check if the property name is "foo". If it is, we do something else; otherwise, we return the default behavior.
Proxies are created using the new Proxy() constructor:
const proxy = new Proxy(target, handler);
The target argument is the object that the proxy will "proxy" for; that is, operations on the proxy will be forwarded to the target object. The handler argument is an object that defines which operations the proxy will intercept.
The handler object can define any of the following methods:
get(target, property, receiver): Called when a property is accessed.set(target, property, value, receiver): Called when a property is set.has(target, property): Called when using the in operator.deleteProperty(target, property): Called when using the delete operator.apply(target, thisArg, argumentsList): Called when a function is invoked.construct(target, argumentsList, newTarget): Called when a constructor is invoked.These methods all have the same signature as the corresponding Reflect methods. The Reflect methods are used to perform the default behavior for an operation; if you want to customize the behavior, you can override the corresponding handler method.
In these examples, the JavaScript Proxy API acts like a security guard at a nightclub. It can intercept requests and make sure they are valid before allowing them to pass through.
Let's say we have an object that represents a user's profile, and we want to make sure that the age property is always a positive number. We can do this by creating a proxy for the object, and intercepting calls to set:
const profile = {
name: "John Doe",
age: 42
};
const proxy = new Proxy(profile, {
set: function(target, property, value, receiver) {
if (property == "age") {
if (typeof value != "number" || value < 0) {
throw new Error("Invalid age");
}
}
// return the default behavior
return Reflect.set(target, property, value, receiver);
}
});
Now, if we try to set the age property to an invalid value, we'll get an error:
proxy.age = "42"; // Error: Invalid age
In this example, we'll create a proxy that logs all property accesses:
const obj = {
foo: "bar"
};
const proxy = new Proxy(obj, {
get: function(target, property, receiver) {
console.log("getting property " + property);
// return the default behavior
return Reflect.get(target, property, receiver);
},
set: function(target, property, value, receiver) {
console.log("setting property " + property + " to " + value);
// return the default behavior
return Reflect.set(target, property, value, receiver);
}
});
Now, whenever we access or set a property on proxy, we'll see a message in the console:
proxy.foo; // getting property foo
proxy.foo = "baz"; // setting property foo to baz
Proxies are revocable, which means that they can be disabled after they've been created. To do this, we use the Proxy.revocable() method:
const obj = {
foo: "bar"
};
const revocable = Proxy.revocable(obj, {
get: function(target, property, receiver) {
console.log("getting property " + property);
// return the default behavior
return Reflect.get(target, property, receiver);
},
});
const proxy = revocable.proxy;
Now, proxy behaves just like our previous example. We can access and set properties, and we'll see messages in the console:
proxy.foo; // getting property foo
proxy.foo = "baz"; // setting property foo to baz
When we're finished with the proxy, we can disable it by calling the revoke() method:
revocable.revoke();
Now, if we try to access or set properties on proxy, we'll get an error:
proxy.foo; // TypeError: Cannot perform 'get' on a proxy that has been revoked
proxy.foo = "baz"; // TypeError: Cannot perform 'set' on a proxy that has been revoked
Proxies provide a powerful way to intercept and customize property accesses in JavaScript. I hope this has helped you understand how to create proxies, and how to use them to perform operations such as validating property values and logging property accesses.
Related to Proxies is the incredibly useful Reflect API, so stay follow or signup for an article on that soon.
Let me know in the comments if you liked this or have any questions—be sure to follow me for more like this!