JavaScript 的 Proxy 介绍

前言

Proxy 是一个用于创建对象代理的对象，它可以拦截和自定义对象的基本操作，比如属性查找、赋值、枚举、函数调用等。Proxy 的用途有很多，比如日志记录、验证、格式化、内存优化等。

如何创建 Proxy？

要创建一个 Proxy，你需要提供两个参数：target 和 handler。target 是要被代理的原始对象，handler 是一个包含各种捕捉器（trap）的对象，它定义了代理的行为。例如，下面的代码创建了一个 Proxy，它会在访问 target 的任何属性时，都返回 “world”。

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler = {
  get(target, prop, receiver) {
    return "world";
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.message1); // world
console.log(proxy.message2); // world

Proxy 提供了哪些捕捉器？

Proxy 提供了很多捕捉器，可以拦截对象的各种操作，比如 get、set、has、deleteProperty、apply、construct 等。Proxy 还可以和 Reflect 对象配合使用，Reflect 对象提供了一些与 Proxy 捕捉器同名的方法，它们可以实现对象的默认行为。

例如，下面的代码创建了一个 Proxy，它会在访问 target 的 message2 属性时，返回 “world”，其他属性则保持原样。

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler = {
  get(target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.message1); // hello
console.log(proxy.message2); // world

总结

Proxy 是一个强大的特性，它可以让我们在 JavaScript 中创建和使用对象代理，实现数据的安全传输、动态修改、懒加载等功能。Proxy 提供了一些简单易用的捕捉器，让我们可以方便地拦截和自定义对象的行为。Proxy 还可以和 Reflect 对象结合使用，实现对象的默认行为

代码007普通

打赏 收藏 海报 链接