代理与反射：元编程与对象拦截的轻松讲解

大家好，欢迎来到今天的讲座！今天我们要聊聊 JavaScript 中的两个强大工具：Proxy 和 Reflect。这两个家伙在元编程和对象拦截方面可是大显身手，让我们一起来看看它们是如何工作的吧！

什么是元编程？

首先，我们来简单了解一下什么是元编程（Metaprogramming）。元编程就是编写可以操作代码本身的代码。听起来有点绕口，对吧？举个例子，元编程允许你在运行时动态地修改类、函数或对象的行为，甚至可以拦截和重写这些行为。这就像你给你的代码加了一个“外挂”，让它可以根据不同的情况做出不同的反应。

在 JavaScript 中，Proxy 和 Reflect 就是实现元编程的两大利器。它们可以帮助我们更灵活地控制对象的行为，而不需要直接修改对象本身。

---

Proxy：对象的“守护者”

1. 什么是 Proxy？

Proxy 是一个特殊的对象，它可以用来拦截并自定义基本的操作（如属性访问、赋值、枚举等）。你可以把它想象成一个“守护者”，它站在对象的前面，决定是否允许外界对这个对象进行操作，或者在操作之前做一些额外的事情。

2. 创建一个 Proxy

创建一个 Proxy 非常简单，只需要调用 new Proxy()，并传入两个参数：

• 目标对象：你想要拦截的对象。
• 处理器对象：包含一系列拦截器（trap）的方法，用于定义如何处理对目标对象的操作。

const target = {
  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 proxy = new Proxy(target, handler);

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

proxy.age = 26;          // 输出: Setting property: age to 26

3. 常见的拦截器

Proxy 提供了多种拦截器，用于拦截不同类型的对象操作。以下是一些常用的拦截器：

拦截器	描述
get	拦截属性读取操作，例如 obj.prop 或 obj['prop']
set	拦截属性赋值操作，例如 obj.prop = value
has	拦截 in 操作符，例如 'prop' in obj
deleteProperty	拦截 delete 操作符，例如 delete obj.prop
apply	拦截函数调用，例如 func(...args)
construct	拦截 new 操作符，例如 new Constructor()

4. 实战演练：创建一个只读对象

假设我们有一个对象，我们希望它只能被读取，不能被修改。我们可以使用 Proxy 来实现这一点：

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

const handler = {
  set() {
    throw new Error('This object is read-only!');
  }
};

const readOnlyObject = new Proxy(target, handler);

console.log(readOnlyObject.name); // 输出: Bob
readOnlyObject.age = 31;          // 抛出错误: This object is read-only!

---

Reflect：操作对象的“助手”

1. 什么是 Reflect？

Reflect 是一个内置的对象，提供了一组静态方法，用于执行与 Proxy 拦截器相同的操作。你可以把 Reflect 看作是一个“助手”，它帮助我们在不使用 Proxy 的情况下，更方便地操作对象。

2. Reflect 的常用方法

Reflect 提供了许多与 Proxy 拦截器对应的方法，以下是一些常用的 Reflect 方法：

方法	描述
Reflect.get(target, prop, receiver)	获取目标对象的属性值
Reflect.set(target, prop, value, receiver)	设置目标对象的属性值
Reflect.has(target, prop)	检查目标对象是否有指定属性
Reflect.deleteProperty(target, prop)	删除目标对象的属性
Reflect.apply(func, thisArg, args)	调用函数
Reflect.construct(constructor, args)	使用 new 操作符构造对象

3. Reflect 与 Proxy 的配合

Reflect 和 Proxy 经常一起使用，Reflect 可以帮助我们在 Proxy 的拦截器中执行默认行为。比如，如果你不想完全阻止某个操作，而是想在操作前后做一些额外的事情，Reflect 就可以派上用场了。

const target = {
  name: 'Charlie',
  age: 35
};

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

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出: Accessing property: name
                         //      Charlie

proxy.age = 36;          // 输出: Setting property: age to 36

4. Reflect 的优势

相比直接使用对象的操作符（如 . 或 []），Reflect 提供了一些额外的优势：

• 一致性：Reflect 的方法总是返回布尔值或抛出异常，这使得代码更加一致和可预测。
• 更好的错误处理：Reflect 的方法不会像普通操作符那样静默失败，而是会抛出明确的错误，便于调试。
• 支持更多操作：Reflect 提供了一些普通操作符无法实现的功能，例如 Reflect.defineProperty()。

---

Proxy 与 Reflect 的结合：高级用法

Proxy 和 Reflect 的结合可以实现一些非常强大的功能。下面我们来看一个例子：创建一个带有日志记录的对象。

1. 日志记录的 Proxy

我们可以通过 Proxy 拦截所有对对象的操作，并使用 Reflect 来执行默认行为，同时记录下每次操作的日志。

function createLoggingProxy(target) {
  const handler = {
    get(target, prop, receiver) {
      console.log(`GET: ${prop}`);
      return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
      console.log(`SET: ${prop} = ${value}`);
      return Reflect.set(target, prop, value, receiver);
    },
    deleteProperty(target, prop) {
      console.log(`DELETE: ${prop}`);
      return Reflect.deleteProperty(target, prop);
    }
  };

  return new Proxy(target, handler);
}

const user = {
  name: 'David',
  age: 40
};

const loggingUser = createLoggingProxy(user);

console.log(loggingUser.name);     // 输出: GET: name
                                  //      David

loggingUser.age = 41;              // 输出: SET: age = 41

delete loggingUser.name;           // 输出: DELETE: name

2. 验证对象的属性

我们还可以使用 Proxy 和 Reflect 来验证对象的属性是否符合某些规则。例如，我们可以确保某个属性的值必须是正整数。

function createValidatingProxy(target) {
  const handler = {
    set(target, prop, value, receiver) {
      if (prop === 'age' && !Number.isInteger(value) || value < 0) {
        throw new Error('Age must be a positive integer');
      }
      return Reflect.set(target, prop, value, receiver);
    }
  };

  return new Proxy(target, handler);
}

const user = {
  name: 'Eve',
  age: 28
};

const validatingUser = createValidatingProxy(user);

validatingUser.age = 29;           // 正常设置
validatingUser.age = -1;           // 抛出错误: Age must be a positive integer

---

总结

今天我们学习了 Proxy 和 Reflect 这两个强大的工具，它们可以帮助我们在 JavaScript 中实现元编程和对象拦截。Proxy 允许我们拦截对象的操作，而 Reflect 则提供了一组静态方法，帮助我们更方便地操作对象。通过将它们结合起来，我们可以实现许多有趣的功能，如日志记录、属性验证等。

希望今天的讲座对你有所帮助！如果你有任何问题，欢迎随时提问 😊

---

参考资料：

• MDN Web Docs: Proxy
• ECMAScript 2015 (ES6) Specification: Proxy
• MDN Web Docs: Reflect

---

谢谢大家的聆听！如果有任何疑问，欢迎留言讨论 😄