JavaScript proxy 示例

当你使用 JavaScript 中的 Proxy 对象时，你可以拦截并自定义目标对象的行为。下面是一个简单的示例，展示了如何使用 Proxy 来监听对象属性的读取和设置操作：

// 目标对象
const target = {
  name: "Alice",
  age: 30
};

// 创建一个 Proxy 对象
const handler = {
  get: function(target, prop) {
    console.log(`读取属性 ${prop}`);
    return target[prop];
  },
  set: function(target, prop, value) {
    console.log(`设置属性 ${prop} 为 ${value}`);
    target[prop] = value;
  }
};

const proxy = new Proxy(target, handler);

// 通过 Proxy 对象访问属性
console.log(proxy.name); // 会触发 get 拦截器

proxy.age = 31; // 会触发 set 拦截器

在上面的示例中，handler 对象包含了两个拦截器：get 和 set。当我们通过 proxy 对象访问属性时，get 拦截器会被触发，而当我们设置属性时，set 拦截器会被触发。通过拦截器，我们可以在操作发生时执行自定义的行为，例如在控制台输出日志。

请注意，这只是 Proxy 的基本示例。Proxy 还支持更多的拦截器，比如 deleteProperty、has、apply 等，可以实现更丰富的功能。了解这些拦截器可以让你更好地理解和使用 Proxy。

---

当使用 Proxy 对象时，你可以使用多种拦截器来捕获不同的操作。以下是一些常见的拦截器示例：

// 目标对象
const target = {
  name: "Alice",
  age: 30
};

// 创建一个 Proxy 对象
const handler = {
  get: function(target, prop) {
    if (prop === "age") {
      return `年龄：${target[prop]}`;
    }
    return target[prop];
  },
  set: function(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new Error("年龄必须是数字");
    }
    target[prop] = value;
  },
  deleteProperty: function(target, prop) {
    console.log(`删除属性 ${prop}`);
    delete target[prop];
  }
};

const proxy = new Proxy(target, handler);

// 通过 Proxy 对象访问属性
console.log(proxy.name); // 输出: Alice
console.log(proxy.age);  // 输出: 年龄：30

// 设置属性（会触发 set 拦截器）
proxy.age = 31;

// 尝试设置非数字的年龄（会触发 set 拦截器抛出错误）
try {
  proxy.age = "thirty";
} catch (error) {
  console.error(error.message); // 输出: 年龄必须是数字
}

// 删除属性（会触发 deleteProperty 拦截器）
delete proxy.name;

在上述示例中，我们展示了如何使用 get 拦截器来处理属性的读取操作，如何使用 set 拦截器来处理属性的设置操作，并在设置非数字年龄时抛出错误。此外，我们还使用了 deleteProperty 拦截器来处理属性的删除操作。

Proxy 的强大之处在于，你可以根据需要实现各种自定义行为，从而更好地控制和管理对象的操作。

---

当使用 Proxy 对象时，除了 get、set、deleteProperty 拦截器外，还有一些其他有用的拦截器，比如 has 和 apply。以下是这两个拦截器的示例：

// 目标对象
const target = {
  name: "Alice",
  age: 30
};

// 创建一个 Proxy 对象
const handler = {
  has: function(target, prop) {
    console.log(`检查属性 ${prop} 是否存在`);
    return prop in target;
  },
  apply: function(target, thisArg, args) {
    console.log(`调用函数，参数为 ${args}`);
    return target(...args);
  }
};

const proxy = new Proxy(target, handler);

// 检查属性是否存在（会触发 has 拦截器）
console.log("name" in proxy); // 输出: 检查属性 name 是否存在

// 调用函数（会触发 apply 拦截器）
const result = proxy.sayHello("Hello, Proxy!"); // 输出: 调用函数，参数为 Hello, Proxy!
console.log(result); // 输出: Hello, Proxy!

在上面的示例中，我们使用了 has 拦截器来捕获属性是否存在的检查操作。当我们使用 in 操作符检查属性是否存在时，has 拦截器会被触发。

另外，我们还使用了 apply 拦截器来捕获函数的调用操作。当我们调用 proxy 对象上的函数时，apply 拦截器会被触发，并显示传递的参数。

通过理解和使用这些不同类型的拦截器，你可以更好地控制和定制 Proxy 对象的行为，以适应各种场景和需求。