高级概念：Proxy 与 Reflect¶

在 JavaScript 中，Proxy 和 Reflect 是两个非常强大的工具，它们允许我们拦截和自定义对象的基本操作。通过使用 Proxy，我们可以创建一个代理对象，该对象可以拦截并重新定义对目标对象的操作。而 Reflect 则提供了一组与 Proxy 拦截器方法相对应的方法，用于执行默认行为。

1. Proxy 的基本概念¶

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。它允许你创建一个代理对象，该对象可以拦截并重新定义对目标对象的操作。

1.1 创建 Proxy¶

要创建一个 Proxy，你需要传递两个参数：

目标对象（target）：这是你要代理的对象。
处理器对象（handler）：这是一个包含拦截器（traps）的对象，用于定义代理的行为。

const target = {
  message: "Hello, World!"
};

const handler = {
  get(target, prop, receiver) {
    if (prop === 'message') {
      return target[prop].toUpperCase();
    }
    return Reflect.get(...arguments);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message); // 输出: "HELLO, WORLD!"

在这个例子中，我们创建了一个 Proxy 对象 proxy，它拦截了对 target 对象的 get 操作。当我们访问 proxy.message 时，处理器中的 get 方法被调用，并将 message 属性的值转换为大写。

1.2 Proxy 的拦截器方法¶

Proxy 提供了多种拦截器方法，以下是一些常用的拦截器：

get(target, prop, receiver)：拦截对象属性的读取操作。
set(target, prop, value, receiver)：拦截对象属性的设置操作。
has(target, prop)：拦截 in 操作符。
deleteProperty(target, prop)：拦截 delete 操作符。
apply(target, thisArg, argumentsList)：拦截函数调用。
construct(target, argumentsList, newTarget)：拦截 new 操作符。

2. Reflect 的基本概念¶

Reflect 是一个内置对象，它提供了与 Proxy 拦截器方法相对应的方法。Reflect 方法通常用于执行默认行为，并且它们的返回值与对应的 Proxy 拦截器方法的返回值一致。

2.1 使用 Reflect 执行默认行为¶

const target = {
  message: "Hello, World!"
};

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting property "${prop}"`);
    return Reflect.get(target, prop, receiver);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message); // 输出: "Getting property "message"" 和 "Hello, World!"

在这个例子中，我们使用 Reflect.get 来执行默认的 get 操作。Reflect.get 方法返回目标对象的属性值，并且它的行为与直接访问属性时相同。

2.2 Reflect 的其他方法¶

Reflect 提供了多种方法，以下是一些常用的方法：

Reflect.get(target, prop, receiver)：获取对象属性的值。
Reflect.set(target, prop, value, receiver)：设置对象属性的值。
Reflect.has(target, prop)：检查对象是否具有某个属性。
Reflect.deleteProperty(target, prop)：删除对象的属性。
Reflect.apply(target, thisArg, argumentsList)：调用函数。
Reflect.construct(target, argumentsList, newTarget)：使用 new 操作符调用构造函数。

3. 代码示例¶

3.1 使用 Proxy 实现属性验证¶

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

const handler = {
  set(target, prop, value) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(user, handler);

proxy.age = 25; // 正常设置
console.log(proxy.age); // 输出: 25

try {
  proxy.age = 'thirty'; // 抛出错误
} catch (e) {
  console.error(e.message); // 输出: "Age must be a number"
}

在这个例子中，我们使用 Proxy 来拦截 set 操作，并验证 age 属性的值是否为数字。如果 age 的值不是数字，则抛出一个错误。

3.2 使用 Reflect 实现默认行为¶

const target = {
  name: "Alice"
};

const handler = {
  get(target, prop, receiver) {
    if (prop === 'greeting') {
      return `Hello, ${target.name}!`;
    }
    return Reflect.get(target, prop, receiver);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.greeting); // 输出: "Hello, Alice!"
console.log(proxy.name); // 输出: "Alice"

在这个例子中，我们使用 Reflect.get 来执行默认的 get 操作。如果访问的属性是 greeting，则返回一个自定义的问候语；否则，返回目标对象的属性值。

3.3 使用 Proxy 和 Reflect 实现函数调用的拦截¶

function greet(name) {
  return `Hello, ${name}!`;
}

const handler = {
  apply(target, thisArg, argumentsList) {
    console.log(`Calling function with arguments: ${argumentsList}`);
    return Reflect.apply(target, thisArg, argumentsList);
  }
};

const proxy = new Proxy(greet, handler);

console.log(proxy('John')); // 输出: "Calling function with arguments: John" 和 "Hello, John!"

在这个例子中，我们使用 Proxy 来拦截函数调用，并在调用函数时打印出传递的参数。然后，我们使用 Reflect.apply 来执行默认的函数调用行为。

4. 练习题¶

4.1 简单练习¶

创建一个 Proxy，使得当访问对象的 fullName 属性时，返回 firstName 和 lastName 的组合。

const person = {
  firstName: "John",
  lastName: "Doe"
};

// 你的代码

console.log(proxy.fullName); // 输出: "John Doe"

4.2 中等练习¶

创建一个 Proxy，使得当设置对象的 age 属性时，如果值小于 0 或大于 120，则抛出一个错误。

const user = {
  name: "Alice",
  age: 25
};

// 你的代码

try {
  proxy.age = 130; // 抛出错误
} catch (e) {
  console.error(e.message); // 输出: "Invalid age"
}

4.3 复杂练习¶

创建一个 Proxy，使得当调用对象的 greet 方法时，自动将 name 参数转换为大写。

const person = {
  name: "John",
  greet(name) {
    return `Hello, ${name}!`;
  }
};

// 你的代码

console.log(proxy.greet('Alice')); // 输出: "Hello, ALICE!"

5. 总结¶

Proxy 允许你创建一个代理对象，该对象可以拦截并重新定义对目标对象的操作。
Reflect 提供了一组与 Proxy 拦截器方法相对应的方法，用于执行默认行为。
通过结合使用 Proxy 和 Reflect，你可以实现强大的对象操作拦截和自定义行为。
Proxy 和 Reflect 是 JavaScript 中非常强大的工具，适用于各种高级编程场景。

通过本主题的学习，你应该能够理解 Proxy 和 Reflect 的基本概念，并能够在实际编程中使用它们来实现复杂的对象操作拦截和自定义行为。