JavaScript 中 Proxy 和 Reflect 的用法？

推荐答案

// www.javascriptcn.com code example
// 使用 Proxy 创建一个代理对象
const target = {
  name: 'Alice',
  age: 25
};

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

const proxy = new Proxy(target, handler);

// 访问属性
console.log(proxy.name); // 输出: Getting name \n Alice

// 设置属性
proxy.age = 30; // 输出: Setting age to 30

本题详细解读

Proxy 的用法

Proxy 是 JavaScript 中的一个内置对象，用于创建一个对象的代理，从而可以拦截并重新定义对象的基本操作。Proxy 的构造函数接受两个参数：

1. target: 需要被代理的目标对象。
2. handler: 一个对象，定义了拦截操作的函数。

常见的拦截操作包括：

• get(target, prop, receiver): 拦截对象属性的读取操作。
• set(target, prop, value, receiver): 拦截对象属性的设置操作。
• has(target, prop): 拦截 in 操作符。
• deleteProperty(target, prop): 拦截 delete 操作符。

Reflect 的用法

Reflect 是 JavaScript 中的一个内置对象，提供了一组与 Proxy 拦截操作相对应的方法。Reflect 的方法通常与 Proxy 的拦截器方法一起使用，以确保操作的默认行为得以执行。

常见的 Reflect 方法包括：

• Reflect.get(target, prop, receiver): 获取对象属性的值。
• Reflect.set(target, prop, value, receiver): 设置对象属性的值。
• Reflect.has(target, prop): 检查对象是否包含某个属性。
• Reflect.deleteProperty(target, prop): 删除对象的某个属性。

结合使用 Proxy 和 Reflect

Proxy 和 Reflect 通常结合使用，Proxy 用于拦截操作，而 Reflect 用于执行默认行为。例如，在 Proxy 的 get 拦截器中，可以使用 Reflect.get 来获取属性的值，并在获取之前或之后执行一些额外的逻辑。

// www.javascriptcn.com code example
const handler = {
  get(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(target, prop, value, receiver);
  }
};

通过这种方式，Proxy 和 Reflect 可以共同实现对对象操作的精细控制和扩展。