Proxy Pattern in JavaScript (Live Playground)

The Proxy pattern is a structural design pattern that involves a class representing the functionality of another class. It is used to create a placeholder for an object, which controls access to it and can add additional functionality. In this tutorial, we'll explore the Proxy pattern in JavaScript, including its use cases, implementation, and benefits.

Why Use the Proxy Pattern?

The Proxy pattern is useful when you want to:

1. Control access to an object by providing a protective placeholder.
2. Add additional functionality to an object without changing its structure or behavior.
3. Improve code maintainability by separating concerns and following the Single Responsibility Principle.

Implementing the Proxy Pattern in JavaScript

Here's an example of how to implement the Proxy pattern using JavaScript classes:

TypeScript

// Real subject
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImage();
  }

  loadImage() {
    console.log(`Loading image: ${this.filename}`);
  }

  displayImage() {
    console.log(`Displaying image: ${this.filename}`);
  }
}

// Proxy
class ProxyImage {
  constructor(filename) {
    this.filename = filename;
    this.realImage = null;
  }

  displayImage() {
    if (!this.realImage) {
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.displayImage();
  }
}

// Client code
const image1 = new ProxyImage('image1.png');
const image2 = new ProxyImage('image2.png');

image1.displayImage(); // Output: Loading image: image1.png, Displaying image: image1.png
image1.displayImage(); // Output: Displaying image: image1.png
image2.displayImage(); // Output: Loading image: image2.png, Displaying image: image2.png

In this example, the RealImage class represents the real subject, and the ProxyImage class represents the proxy. The ProxyImage class controls access to the RealImage class, loading the image only when it's needed, and providing a placeholder for the real image.

Live Playground, Try it Yourself

Benefits of the Proxy Pattern

Implementing the Proxy pattern in your JavaScript projects offers several benefits:

1. Controlled Access: The Proxy pattern allows you to control access to an object, providing a protective placeholder that can enforce access control, lazy instantiation, or other constraints.
2. Additional Functionality: The Proxy pattern enables you to add additional functionality to an object without changing its structure or behavior, promoting the Single Responsibility Principle and code maintainability.
3. Separation of Concerns: The Proxy pattern separates concerns by decoupling the real subject from its proxy, making the code easier to understand and maintain.

Conclusion

In summary, the Proxy pattern is a valuable tool in JavaScript development that can help you create flexible, maintainable code. By understanding and implementing this pattern, you can enhance your web development skills and create more robust applications.