怎么在 JavaScript 中实现代理模式

在JavaScript中实现代理模式通常包括以下几个步骤：创建一个对象（实际对象）、使用代理对象来控制对实际对象的访问和操作、在代理对象中实现额外的功能，比如访问控制、缓存、延迟初始化等。一个典型的场景是使用代理模式为网络请求添加缓存机制：代理对象在执行网络请求前先检查是否有缓存数据，如果有则返回缓存数据，否则执行网络请求并将结果缓存起来。这样可以减少不必要的网络请求，提高应用性能。

在JavaScript中，代理模式可以很容易地通过ES6引入的Proxy对象实现。Proxy允许你创建一个代理对象，该对象可以定制对另一个对象（目标对象）的基本操作，如属性读取、属性赋值、函数调用等。

一、代理模式基础

代理模式是一种设计模式，它通过提供一个代理对象来代理或者替代一个真实对象的操作。代理控制对原对象的访问，并允许在不改变原对象代码的前提下，在执行操作前后添加额外的操作。

创建真实对象和代理对象

真实对象是需要被代理的对象，它定义了实际的业务逻辑。而代理对象则包裹或者封装了真实对象，客户端通过代理对象间接地访问原对象。

class RealObject {
  performAction() {
    console.log('RealObject action performed');
  }
}
class ProxyObject {
  constructor(realObject) {
    this.realObject = realObject;
  }
  performAction() {
    console.log('ProxyObject action will be delegated to RealObject');
    this.realObject.performAction();
  }
}
const realObject = new RealObject();
const proxyObject = new ProxyObject(realObject);
proxyObject.performAction();

拦截和控制访问

代理对象通常会在转发请求之前或之后，执行一些附加操作，比如权限校验、参数处理等。

class ProxyObject {
  constructor(realObject) {
    this.realObject = realObject;
  }
  performAction() {
    if (this.checkAccess()) {
      console.log('Access granted. ProxyObject now calls performAction on RealObject');
      this.realObject.performAction();
      this.logAccess();
    }
  }
  checkAccess() {
    // Perform access control
    return true;
  }
  logAccess() {
    console.log('Performed action has been logged');
  }
}

二、使用ES6的Proxy对象

使用ES6的Proxy对象是实现JavaScript中代理模式的现代和更高级的方式。Proxy对象可以拦截对目标对象的操作。

创建和使用Proxy

Proxy对象接受两个参数：目标对象和处理程序对象。处理程序对象定义了所要拦截的操作。

const target = {
  message1: "hello",
  message2: "everyone"
};
const handler = {
  get: function(target, prop, receiver) {
    if (prop === "message2") {
      return `overridden ${target[prop]}`;
    }
    return Reflect.get(...arguments);
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.message1); // Output: hello
console.log(proxy.message2); // Output: overridden everyone

Proxy方法和拦截器

Proxy提供了多个拦截操作的方法，如get、set、has、deleteProperty等，可以让我们控制对对象属性的操作。

const handler = {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    }
    return `Property ${prop} doesn't exist.`;
  },
  set(target, prop, value) {
    if (prop === 'id') {
      throw new Error('ID is immutable.');
    }
    target[prop] = value;
    return true;
  }
};
const target = {};
const proxy = new Proxy(target, handler);
proxy.a = 'value';
console.log(proxy.a); // Output: value

三、应用代理模式的场景

代理模式可以应用于多种场景中，如实现延迟加载、访问控制、记录日志和其他非功能性需求。

访问控制

使用代理模式可以在不改变原始对象的基础上添加访问控制的逻辑。

class ControlledAccess {
  constructor(user, realObject) {
    this.user = user;
    this.realObject = realObject;
  }
  performAction() {
    if (this.user.hasAccess()) {
      this.realObject.performAction();
    } else {
      console.log('Access denied');
    }
  }
}

数据验证

代理可以用来进行数据验证，确保对象的属性在设置时不会违反某些规则。

const validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value < 0 || value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }
    // The default behavior to store the value
    obj[prop] = value;
    return true;
  }
};
const person = new Proxy({}, validator);
person.age = 100; // pass
person.age = 'young'; // throws an error
person.age = 300; // throws an error

性能优化

代理模式可以用于性能优化，比如实现懒加载、结果缓存等。

class HeavyObject {
  constructor() {
    this.calculateHeavyStuff = this.calculateHeavyStuff.bind(this);
    this.data = this.calculateHeavyStuff();
  }
  calculateHeavyStuff() {
    // Assume this function does a lot of heavy calculations.
    console.log('Calculating heavy stuff');
    return {};
  }
}
const lazyHeavyObjectProxy = new Proxy(HeavyObject, {
  construct(target, args) {
    console.log('HeavyObject init has been delayed');
    return new Proxy(new target(...args), {
      get(target, prop) {
        console.log(`Property "${prop}" is being accessed`);
        return target[prop];
      }
    });
  }
});
console.log('HeavyObject creation will start on demand only');
const heavyObjectInstance = new lazyHeavyObjectProxy();
console.log('HeavyObject created');
heavyObjectInstance.calculateHeavyStuff();