代理对象：拦截对象操作 (ES6+)

引言

嘿，大家好！今天我们要聊聊 JavaScript 中的 Proxy 对象。如果你觉得 JavaScript 已经够复杂了，那我告诉你，Proxy 可能会让你觉得它更有趣，也更强大。想象一下，你可以像一个“隐形人”一样，悄无声息地监控和修改对象的行为，是不是很酷？没错，这就是 Proxy 的魅力所在！

在 ES6 之前，如果你想拦截或修改对象的操作，通常需要手动编写大量的逻辑，或者使用一些第三方库。但自从 ES6 引入了 Proxy，一切都变得简单多了。Proxy 允许你创建一个“代理对象”，这个代理对象可以拦截对原始对象的各种操作，并根据你的需求进行自定义处理。

那么，Proxy 到底是什么？它是如何工作的？我们又能用它做些什么呢？接下来，让我们一起揭开 Proxy 的神秘面纱吧！

什么是 Proxy？

Proxy 是 JavaScript 中的一个内置对象，它允许你为另一个对象创建一个“代理”。通过这个代理，你可以拦截并自定义对该对象的各种操作，比如属性访问、赋值、删除等。简单来说，Proxy 就像是一个“中间人”，它站在你和目标对象之间，控制你与对象之间的交互。

Proxy 的基本语法非常简单：

const proxy = new Proxy(target, handler);

• target：你要代理的目标对象（可以是任何类型的对象，甚至是函数）。
• handler：一个对象，包含一系列陷阱（traps），用于定义当某些操作发生时应该如何处理。

陷阱 (Traps)

Proxy 的核心在于它的“陷阱”机制。陷阱并不是什么危险的东西，而是指你可以在特定的操作发生时，插入自定义的逻辑。Proxy 提供了许多不同的陷阱，每个陷阱对应一种对象操作。以下是一些常见的陷阱：

陷阱名称	拦截的操作	描述
get	属性读取	当你尝试读取对象的某个属性时触发。
set	属性赋值	当你尝试给对象的某个属性赋值时触发。
has	in 操作符	当你使用 in 操作符检查对象是否包含某个属性时触发。
deleteProperty	delete 操作符	当你尝试删除对象的某个属性时触发。
apply	函数调用	当你调用一个被代理的函数时触发。
construct	构造函数调用	当你使用 new 关键字调用一个被代理的构造函数时触发。
ownKeys	Object.keys() 等方法	当你获取对象的自有属性时触发。

这些陷阱让你可以在对象操作的每一个关键时刻插入自己的逻辑，从而实现对对象行为的完全控制。

实战演练：简单的 Proxy 示例

好了，理论说得差不多了，咱们来点实际的代码吧！假设我们有一个普通的对象 person，我们想通过 Proxy 来监控对它的属性访问和修改。我们可以这样做：

const person = {
  name: 'Alice',
  age: 25,
};

const handler = {
  get(target, prop) {
    console.log(`Getting property: ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property: ${prop} to ${value}`);
    target[prop] = value;
  }
};

const proxyPerson = new Proxy(person, handler);

console.log(proxyPerson.name);  // 输出: Getting property: name
                                //      Alice

proxyPerson.age = 26;           // 输出: Setting property: age to 26
console.log(proxyPerson.age);   // 输出: Getting property: age
                                //      26

在这个例子中，我们创建了一个 Proxy，它代理了 person 对象。每当有人尝试读取或修改 person 的属性时，Proxy 会自动调用相应的陷阱函数，并输出一条日志信息。这样，我们就能够轻松地监控对象的操作了。

高级用法：拦截对象的遍历

除了简单的属性访问和修改，Proxy 还可以拦截更复杂的操作，比如对象的遍历。假设我们有一个对象 inventory，它包含了一些商品及其数量。我们希望在遍历这个对象时，只显示那些数量大于 0 的商品。我们可以通过 Proxy 的 ownKeys 和 get 陷阱来实现这一点：

const inventory = {
  apple: 5,
  banana: 0,
  orange: 10,
  grape: 0,
};

const handler = {
  ownKeys(target) {
    return Object.keys(target).filter(key => target[key] > 0);
  },
  get(target, prop) {
    if (target[prop] > 0) {
      return target[prop];
    } else {
      return `${prop} is out of stock`;
    }
  }
};

const proxyInventory = new Proxy(inventory, handler);

console.log(Object.keys(proxyInventory));  // 输出: ['apple', 'orange']

console.log(proxyInventory.banana);        // 输出: banana is out of stock
console.log(proxyInventory.orange);        // 输出: 10

在这个例子中，我们使用了 ownKeys 陷阱来过滤掉数量为 0 的商品，并且在 get 陷阱中返回了一条友好的提示信息。这样一来，即使你在遍历对象时，也不会看到那些已经售罄的商品。

防御性编程：防止非法操作

Proxy 还可以用来实现防御性编程，防止用户对对象进行非法操作。例如，我们可能不希望用户直接修改某些敏感属性，或者我们希望对输入的数据进行验证。下面是一个简单的例子，展示了如何使用 Proxy 来防止用户修改 age 属性，并确保 name 属性只能是字符串：

const user = {
  name: 'Bob',
  age: 30,
};

const handler = {
  set(target, prop, value) {
    if (prop === 'age') {
      throw new Error('Age cannot be modified');
    }

    if (prop === 'name' && typeof value !== 'string') {
      throw new Error('Name must be a string');
    }

    target[prop] = value;
    return true;
  }
};

const proxyUser = new Proxy(user, handler);

proxyUser.name = 'Charlie';  // 合法操作
// proxyUser.age = 35;      // 抛出错误: Age cannot be modified
// proxyUser.name = 123;     // 抛出错误: Name must be a string

通过这种方式，我们可以确保对象的状态始终是合法的，避免了潜在的错误。

代理函数：拦截函数调用

Proxy 不仅仅可以代理普通对象，还可以代理函数。通过 apply 和 construct 陷阱，我们可以拦截函数的调用和构造函数的实例化。这在实现装饰器模式、日志记录等功能时非常有用。

例如，假设我们有一个简单的加法函数 add，我们希望通过 Proxy 来记录每次调用的时间戳：

function add(a, b) {
  return a + b;
}

const handler = {
  apply(target, thisArg, argumentsList) {
    console.log(`Calling add() at ${new Date().toISOString()}`);
    return target.apply(thisArg, argumentsList);
  }
};

const proxyAdd = new Proxy(add, handler);

console.log(proxyAdd(2, 3));  // 输出: Calling add() at 2023-10-01T12:34:56.789Z
                              //      5

在这个例子中，我们使用了 apply 陷阱来拦截对 add 函数的调用，并在每次调用时记录当前的时间戳。这样，我们就可以轻松地跟踪函数的执行情况了。

总结

好了，今天的讲座就到这里啦！通过 Proxy，我们不仅可以拦截和修改对象的操作，还可以实现各种高级功能，比如日志记录、权限控制、数据验证等。Proxy 是一个非常强大的工具，但它也有一些需要注意的地方。例如，过度使用 Proxy 可能会导致代码难以调试，因此我们在使用时要保持适度。

总之，Proxy 为我们提供了一种全新的方式来操作和控制 JavaScript 对象。希望大家能在日常开发中善加利用，写出更加优雅和灵活的代码！

如果你还有其他问题，或者想了解更多关于 Proxy 的内容，欢迎随时提问！ 😊