JS Proxy相关

涡轮苏卡
398 阅读2分钟

JavaScript Proxy 教程

什么是 Proxy？

Proxy 是 ECMAScript 6 引入的一个新的功能。它允许您拦截并重写外部访问内部对象的操作，并以自己的方式处理它们。你可以认为它是在原有的对象和外部世界的模拟器之间添加的一个“防火墙”。它让你能够拦截并访问外部访问内部对象的任何操作，并修改这些访问操作。

当您给对象添加 Proxy 时，您可以控制对象的行为模式。例如，您可以定义一个对象的属性访问方法或修改的方法，从而允许您自定义这些过程。解决了问题让原有的对象在运行时不可改变的困难。对于需要动态更改对象行为的情况来说，这是非常重要的。

创建一个 Proxy 对象

在 JavaScript 中，Proxy 对象可以通过使用构造函数和定义一个“句柄”对象来创建。该句柄对象包含您想要进行代理的对象，并重写句柄对象的一些方法来控制外部访问这个对象的行为方式。

代理对象可以拦截以下几个方法：

  • get：读取代理对象属性的方法
  • set：修改代理对象属性的方法
  • apply：函数调用的方法
  • construct：使用 new 关键字调用时，代理实例自身的构造函数方法

以下是一个基本示例:

const originalObject = {
  name: '张三',
  age: 20,
};
​
const proxyObject = new Proxy(originalObject, {
  get(target, property) {
    console.log(`正在获取 ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`正在设置 ${property}=${value}`);
    target[property] = value;
  },
});
​
// 读取属性
console.log(proxyObject.name);
​
// 设置属性
proxyObject.age = 30;

在上面的示例中，我们传递了一个原始对象和一个句柄对象作为参数来创建代理对象。我们在句柄对象上定义了 get 和 set 方法来创建一个包装器，它用来捕获外部访问对象的行为并在需要时执行一些操作。

这里的 get 和 set 方法分别捕获对代理对象的读写操作。当调用代理对象上的属性时，由于我们定义的句柄 get 方法会调用，你会看到控制台输出“正在获取 xxx”；然后返回原始对象的属性。

同样，当设置属性时，由于句柄中定义的 set 方法会被调用，你会看到控制台输出“正在设置 xxx = xxx”。

性能、代理沙箱

在大多数情况下，使用 Proxy 不会对性能产生很大的负面影响。但是，如果你有大量的对象需要代理，可能会造成一些轻微的性能问题。

另一个小的注意点是在使用代理时，需要谨慎地管理代理对象的“沙箱”和权限问题。如果您不小心让代理对象过多地获得了对底层操作的“权限”，外界使用代理服务器的过程中可能会被潜在的威胁所利用。

相比Object.defineProperty需要遍历单个属性,proxy可以直接代理控制整个对象.

Object.defineProperty与Proxy

区别

  1. Object.defineProperty() 只能代理某个对象的一个属性，而 Proxy 可以代理整个对象或对象的任意数量的属性。
  2. Object.defineProperty() 没有内置的拦截器方法，而 Proxy 具有内置的拦截器方法，例如 get、set、apply 和 construct。
  3. Object.defineProperty() 必须在定义时指定要拦截的属性，而 Proxy 允许在代理对象上动态捕获和处理访问和操作。
  4. Object.defineProperty() 不能轻松地撤消属性的拦截，而 Proxy 对象允许在需要的时候轻松地添加和删除拦截器方法。

优缺点

Object.defineProperty() 的优缺点

优点：

  1. 可以兼容 ES5 以前的浏览器。
  2. 可以更加灵活、细粒度地控制和拦截某个属性的操作。

缺点：

  1. 只能代理某个对象的某个属性。
  2. 不能动态地捕获和处理访问和操作，必须在定义时指定要拦截的属性。
  3. 不能轻松地添加或删除拦截器。

Proxy 的优缺点

优点：

  1. 可以代理整个对象或对象的任意数量的属性。
  2. 有内置的拦截器方法，例如 get、set、apply 和 construct。
  3. 允许动态捕获和处理访问和操作。
  4. 可以轻松地添加和删除拦截器。

缺点：

  1. 无法在所有浏览器上运行，只能在现代浏览器和 Node.js 环境中运行。
  2. 在某些情况下，更复杂的逻辑可能会影响性能。

综上所述，Object.defineProperty() 提供了对单个属性更细粒度的控制，而 Proxy 具有更高级的内置拦截器，并且可以代理对象的整个属性。在实际开发中，开发人员可以根据项目需求选择使用哪种代理方式，在灵活性、性能和兼容性等方面进行平衡考虑。

几个使用场景

1. 数据验证和限制

使用 Proxy 对象的 set 方法，我们可以在设置属性值之前验证值的有效性。在下面的代码中，我们使用 Proxy 对象来确保购买数量小于等于库存数量：

const stock = { name: "shirt", quantity: 10 };
const handler = {
  set(target, prop, value) {
    if (prop === "quantity" && value > target.quantity) {
      throw new Error(`不能购买超过库存量的商品`);
    }
    target[prop] = value;
    return true;
  },
};
const product = new Proxy(stock, handler);
​
// 购买 5 件商品
product.quantity = 5;
console.log(product.quantity); // output: 5
​
// 购买 15 件商品会抛出一个错误
product.quantity = 15;

2. 动态代理

代理对象允许开发人员干预属性和方法的访问。这使得开发人员可以更轻松地扩展现有的代码。在下面的示例中，我们使用代理对象来报告属性值的读取次数：

const counter = { count: 0 };
​
const handler = {
  get(target, prop) {
    if (prop === "count") {
      console.log(`属性 ${prop} 被读取了 ${target.count + 1} 次。`);
    }
    return target[prop];
  },
};
const proxyCounter = new Proxy(counter, handler);
​
// 读取值：属性 count 被读取了 1 次。
let count = proxyCounter.count;
​
// 读取值：属性 count 被读取了 2 次。
count = proxyCounter.count;
​
// 读取值：属性 count 被读取了 3 次。
count = proxyCounter.count;

3. 表单输入验证

在大多数表单中，有时需要在提交表单之前进行验证。使用 proxy 对象，我们可以轻松地实现这一点，我们可以通过在代理对象中添加表单验证器以拦截表单数据的所有操作。

以下是使用代理对象进行表单验证的示例代码：

const form = {
  name: "",
  email: "",
  password: "",
};
​
const formValidator = {
  set(target, prop, value) {
    if ((prop === 'name' || prop === 'email' || prop === 'password') && !value.trim()) {
      throw new Error(`${prop} 必须填写`);
    } 
    if (prop === 'email' && !/\S+@\S+.\S+/.test(value)) {
      throw new Error('请输入正确的邮箱地址');
    }
    if (prop === 'password' && value.length < 6) {
      throw new Error('密码长度不能少于 6 位');
    }
    target[prop] = value;
    return true;
  },
};
​
const formProxy = new Proxy(form, formValidator);
​
formProxy.name = "Mike";
formProxy.email = "mike_email.com"; // 抛出错误，输入邮箱格式不正确
formProxy.password = "abc12"; // 抛出错误，密码长度不能少于 6 位

总结

Proxy 是一个非常有用的功能，它允许您控制对象的行为，自定义访问和操作。您可以使用 Proxy 使对象在运行时动态修改，IT 行业也会常用它来创建模拟的数据、特殊的参数等等。当创建代理对象时，您需要定义一个句柄对象，该对象包含了拦截器方法。您可以使用拦截器方法来管理代理对象的各种活动。

Proxy 对象为 JavaScript 带来了更多的灵活性和控制能力，这些能力可以让开发人员更好地控制代码的行为。在使用 Proxy 时，可以继续遵循最佳实践，以确保代码的高效性和安全性。

avatar
文章
阅读
粉丝