In my previous blogs, I explored various creational design patterns that deal with object creation mechanisms. Now, it’s time to dive into structural design patterns, which focus on how objects and classes are composed to form larger structures while keeping them flexible and efficient. Let's start with proxy design pattern
The Proxy design pattern is a structural design pattern that provides an object representing another object. It acts as an intermediary that controls access to the real object, adding additional behavior such as lazy initialization, logging, access control, or caching, without changing the original object’s code.
In JavaScript, proxies are built-in features provided by the Proxy object, allowing you to define custom behavior for fundamental operations such as property access, assignment, function invocation, etc.
The Proxy pattern is particularly useful when:
Imagine you have a large painting that you want to show your guests, but it takes a lot of time to pull it out from a storage room (because it's heavy and takes time to carry). Instead of waiting for that every time, you decide to use a small postcard image of the painting to show them quickly while they wait for the actual painting to be fetched.
In this analogy:
Think of a real estate agent as a proxy. When you want to buy a house, you don’t immediately visit every house (loading the real object). Instead, the real estate agent (proxy) first shows you photos and descriptions. Only when you’re ready to buy (i.e., when you call display()), the agent arranges a house visit (loads the real object).
Let’s use the example of image loading in a web application where we want to delay the loading of the image until the user requests it (lazy loading). A proxy can act as a placeholder until the real image is loaded.
Here’s how you can implement the Proxy design pattern in JavaScript.
// Step 1: The real object class RealImage { constructor(filename) { this.filename = filename; this.loadImageFromDisk(); } loadImageFromDisk() { console.log(`Loading ${this.filename} from disk...`); } display() { console.log(`Displaying ${this.filename}`); } } // Step 2: The proxy object class ProxyImage { constructor(filename) { this.realImage = null; // no real image yet this.filename = filename; } display() { if (this.realImage === null) { // load the real image only when needed this.realImage = new RealImage(this.filename); } this.realImage.display(); // display the real image } } // Step 3: Using the proxy to display the image const image = new ProxyImage("photo.jpg"); image.display(); // Loads and displays the image image.display(); // Just displays the image (already loaded)
Explanation:
1). The Real Image:
2). The Proxy Image:
3). Usage:
The ES6 proxy consists of a proxy constructor that accepts a target & handler as arguments
const proxy = new Proxy(target, handler)
Here, target represents the object on which proxy is applied, while handler is a special object that defines the behaviour of the proxy.
The handler object contains a series of optional methods with predefined names called trap methods ( forexample apply,get,set and has) that are automatically called when the corresponding operations are performed on the proxy instance.
Let's understand this by implementing calculator using built-in proxy
// Step 1: The real object class RealImage { constructor(filename) { this.filename = filename; this.loadImageFromDisk(); } loadImageFromDisk() { console.log(`Loading ${this.filename} from disk...`); } display() { console.log(`Displaying ${this.filename}`); } } // Step 2: The proxy object class ProxyImage { constructor(filename) { this.realImage = null; // no real image yet this.filename = filename; } display() { if (this.realImage === null) { // load the real image only when needed this.realImage = new RealImage(this.filename); } this.realImage.display(); // display the real image } } // Step 3: Using the proxy to display the image const image = new ProxyImage("photo.jpg"); image.display(); // Loads and displays the image image.display(); // Just displays the image (already loaded)
The best part using proxy this way as :
- The proxy object inherits the prototype of the original Calculator class.
- Mutations are avoided through the set trap of the Proxy.
Explanation of the Code
1). Prototype Inheritance:
2). Handling getOperations:
3). Preventing Mutations:
The set trap throws an error whenever there is an attempt to modify any property on the target object. This ensures immutability.
4). Using Prototype Methods through the Proxy:
The proxy allows access to methods such as add, subtract, multiply, and divide, all of which are defined on the original object's prototype.
Key points to observe here is:
If you've made it this far, don't forget to hit like ❤️ and drop a comment below with any questions or thoughts. Your feedback means the world to me, and I'd love to hear from you!
The above is the detailed content of Proxy Design Pattern. For more information, please follow other related articles on the PHP Chinese website!