用ES6 Proxy做些有意义的事

2024-01-28 11:43:02

ES6 Proxy：赋能对象访问与操作

前言

在 JavaScript 的世界中，ES6 Proxy 横空出世，赋予了我们强大的能力，让我们能够在对象和操作之间架起一座“代理”，从而拦截对对象的访问并执行一系列动作。这种机制为我们开启了众多实用功能，包括：

对象访问控制： 精细管控对象的访问权限，为特定用户或角色打造专属访问通道。
数据验证： 为对象的属性值设定验证规则，确保数据准确无误，杜绝异常值入侵。
性能优化： 巧妙缓存对象，省去重复计算的麻烦，大幅提升访问效率。
函数代理： 为函数套上代理外衣，记录函数调用，或在函数执行前后插入自定义操作。

对象访问控制

使用 Proxy 实施对象访问控制可谓轻而易举。只需创建一个代理，在代理的 get 和 set 拦截器中，检查用户是否拥有访问对象的权限。代码示例如下：

const person = {
  name: "John Doe",
  age: 30,
};

const proxy = new Proxy(person, {
  get: function(target, property) {
    if (property === "age" && !currentUser.isAdmin) {
      throw new Error("Access denied");
    }

    return target[property];
  },
  set: function(target, property, value) {
    if (property === "age" && !currentUser.isAdmin) {
      throw new Error("Access denied");
    }

    target[property] = value;
  },
});

// 尝试访问对象的属性
console.log(proxy.name); // "John Doe"
console.log(proxy.age); // Error: Access denied

// 尝试修改对象的属性
proxy.age = 31; // Error: Access denied

数据验证

利用 Proxy 实现数据验证也是轻车熟路。创建一个代理，在代理的 set 拦截器中，检查属性值是否符合要求。代码示例如下：

const person = {
  name: "John Doe",
  age: 30,
};

const proxy = new Proxy(person, {
  set: function(target, property, value) {
    if (property === "age" && value < 0) {
      throw new Error("Age must be a positive number");
    }

    target[property] = value;
  },
});

// 尝试修改对象的属性
proxy.age = -1; // Error: Age must be a positive number

性能优化

使用 Proxy 进行性能优化需要一些技巧。你需要深入了解对象的访问模式，识别可以优化的操作。例如，你可以创建一个缓存对象的代理，避免在后续访问时重复计算对象的值。代码示例如下：

const person = {
  name: "John Doe",
  age: 30,
  calculateFullName: function() {
    return `${this.name} ${this.age}`;
  },
};

const proxy = new Proxy(person, {
  get: function(target, property) {
    if (property === "fullName") {
      return target.calculateFullName();
    }

    return target[property];
  },
});

// 首次调用 calculateFullName()
console.log(proxy.fullName); // "John Doe 30"

// 再次调用 calculateFullName()，但这次从缓存中获取结果
console.log(proxy.fullName); // "John Doe 30"

函数代理

使用 Proxy 代理函数也相当简单。创建一个代理，在代理的 apply 拦截器中，执行自定义操作。例如，你可以创建一个记录函数调用的代理：

const fn = function(a, b) {
  console.log(`Function called with arguments ${a} and ${b}`);
};

const proxy = new Proxy(fn, {
  apply: function(target, thisArg, args) {
    console.log("Function called");
    return target.apply(thisArg, args);
  },
});

// 调用代理函数
proxy(1, 2);

// 输出：
// Function called
// Function called with arguments 1 and 2