JavaScript中的代理模式与元编程

描述
代理模式是一种结构型设计模式，它允许你创建一个代理对象来控制对另一个对象（称为目标对象）的访问。在JavaScript中，Proxy对象提供了这种能力，它是ES6引入的元编程特性之一。元编程指的是编写能够操作其他程序（或自身）的程序。Proxy允许你拦截并自定义对象的基本操作（如属性读取、赋值、函数调用等），从而实现高级功能如验证、日志记录、缓存等。

知识要点

1. Proxy的基本语法和拦截操作
2. 常见的代理陷阱（trap）及其应用
3. Proxy在元编程中的实际用例
4. Proxy的局限性及注意事项

循序渐进讲解

步骤1：Proxy的基本语法
Proxy通过包装目标对象来创建代理对象。其构造函数接受两个参数：

• target：要代理的目标对象。
• handler：一个对象，其属性是“陷阱”（trap）函数，用于定义拦截行为。

示例：

const target = { name: "Alice" };
const handler = {
  get: function(target, property) {
    return property in target ? target[property] : "Default";
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // "Alice"
console.log(proxy.age);  // "Default"（拦截了不存在的属性）

步骤2：常见的代理陷阱
陷阱是handler对象的方法，对应对象的基本操作。常用陷阱包括：

• get(target, prop, receiver)：拦截属性读取。
• set(target, prop, value, receiver)：拦截属性赋值。
• has(target, prop)：拦截in操作符。
• apply(target, thisArg, argumentsList)：拦截函数调用（当目标为函数时）。
• construct(target, argumentsList, newTarget)：拦截new操作符。

示例：使用set陷阱验证属性值

const validator = {
  set: function(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Age must be a number");
    }
    target[prop] = value; // 验证通过后赋值
    return true; // 表示设置成功
  }
};
const person = new Proxy({}, validator);
person.age = 30; // 正常
person.age = "30"; // 抛出TypeError

步骤3：Proxy的元编程应用

• 数据绑定与响应式系统：拦截数据变化，自动更新UI（如Vue 3的响应式核心）。
• 日志记录：跟踪对象访问和修改。
• 缓存（Memoization）：缓存函数结果，避免重复计算。
• 访问控制：限制对敏感属性或方法的访问。

示例：实现简单缓存

function createCache(fn) {
  const cache = new Map();
  return new Proxy(fn, {
    apply: function(target, thisArg, argumentsList) {
      const key = JSON.stringify(argumentsList);
      if (cache.has(key)) {
        console.log("Returning cached result");
        return cache.get(key);
      }
      const result = target.apply(thisArg, argumentsList);
      cache.set(key, result);
      return result;
    }
  });
}

const heavyCalculation = createCache(function(x) { return x * x; });
console.log(heavyCalculation(5)); // 计算25
console.log(heavyCalculation(5)); // 从缓存返回25

步骤4：Proxy的局限性及注意事项

• 性能开销：代理操作比直接访问稍慢，在性能敏感场景需谨慎使用。
• 目标对象不可变性：代理不会修改目标对象本身，但目标对象的更改会反映到代理上。
• 陷阱触发条件：某些操作（如Object.keys）可能不会触发预期陷阱，需结合Reflect方法处理。
• 浏览器兼容性：现代浏览器均支持，但旧环境可能需要polyfill。

总结
Proxy是JavaScript元编程的强大工具，通过拦截对象操作实现灵活的控制。结合Reflect对象（提供对应陷阱的默认行为），可以构建更健壮的代理逻辑。实际应用中，需权衡其灵活性与性能成本，适用于日志、验证、缓存等高级场景。