Proxy和Reflect，打造灵活的JS代理机制 （代码示例）

在 JavaScript 中，代理（Proxy）和反射（Reflect）是 ES6 引入的两个新特性。Proxy用于创建一个对象的代理，从而实现对这个对象的操作的拦截、转换或扩展；而Reflect则提供了一系列与 JavaScript 运行时进行交互的方法，使得开发者可以更方便地操作 JavaScript 对象。

我对这篇文章进行了精炼处理，力求言简意赅。希望对你有所帮助，有所借鉴~~

JavaScript 中的代理与拦截

Proxy 对象用于创建一个对象的代理，从而可以在访问原始对象之前先介入并操作某些操作（如属性查找、赋值、枚举、函数调用等）。代理可以控制对内部对象的访问，并可以按照需要自定义行为。
Proxy的语法如下：

const proxy = new Proxy(target, handler);

• target：目标对象，即被代理的对象。
• handler：处理程序对象，定义了代理对象的方法，用于拦截和定义目标对象的操作。

我们看一个实例代码：

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

const handler = {
  get(target, prop, receiver) {
    console.log(`访问了属性：${prop}`);
    return target[prop];
  },
  set(target, prop, value, receiver) {
    console.log(`设置了属性：${prop}，值为：${value}`);
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：访问了属性：name，Alice
proxy.age = 30; // 输出：设置了属性：age，值为：30
console.log(proxy.age); // 输出：访问了属性：age，30

通过创建了一个 Proxy，拦截了target属性的访问和赋值操作，并在这些操作发生时打印出相应的信息。

JavaScript 中的反射

Reflect 是一个内置的对象，它提供了拦截 JavaScript 操作的方法。这些方法与 Proxy 处理器对象的方法相对应。但是又有所不同，我们接着往下看。

// 定义目标对象
const target = {
  name: 'Alice',
  age: 25
};

// 使用 Reflect.get() 来获取属性值
const name = Reflect.get(target, 'name');
console.log(name); // 输出：Alice

// 使用 Reflect.set() 来设置属性值
Reflect.set(target, 'age', 30);
console.log(target.age); // 输出：30

// 使用 Reflect.has() 来检查属性是否存在
const hasAge = Reflect.has(target, 'age');
console.log(hasAge); // 输出：true

// 使用 Reflect.deleteProperty() 来删除属性
Reflect.deleteProperty(target, 'name');
console.log(target.name); // 输出：undefined

// 使用 Reflect.ownKeys() 来获取对象的所有自有属性的键
const keys = Reflect.ownKeys(target);
console.log(keys); // 输出：['age']

Reflect 的方法与 JS 语言内部的操作紧密对应，使得在编写代理处理程序时能够轻松地调用原始操作。

那么为什么还需要 Reflect 呢？🧐🧐🧐

Proxy 的局限性

JavaScript 中的 Proxy 提供了一种强大且灵活的方式来拦截并定义对象的基本操作的自定义行为。然而，单独使用 Proxy 在某些情况下可能会遇到一些局限性，特别是在尝试模仿默认行为时。

例如，如果我们想要在拦截属性的读取操作时，仍然返回属性的默认值，我们就需要在处理程序中实现这一点。

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

const handler = {
  get(target, prop, receiver) {
    if (prop in target) {
      return target[prop]; // 手动模仿默认的 get 行为
    }
    return undefined; // 如果属性不存在，返回 undefined
  },
  set(target, prop, value, receiver) { 
      if (prop === 'age' && typeof value !== 'number') { 
          throw new TypeError('Age must be a number'); 
      } // 手动实现默认行为 
      target[prop] = value; 
      return true; 
   }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出：Alice

这种方式虽然可行，但不够优雅，因为它要求开发者手动实现语言的默认行为，并且容易出错。

而这时，Reflect 的作用就凸显出来了。Reflect 提供了一组与 Proxy 一一对应的静态方法，这些方法可以用来调用对象的默认行为。这使得在编写代理处理程序时，可以轻松地模仿或调用默认行为。

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

const handler = {
  get(target, prop, receiver) {
    // 使用 Reflect 模仿默认的 get 行为，如果属性不存在，返回 undefined
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) { 
     // 使用 Reflect.set() 调用默认行为，成功返回true
     return Reflect.set(target, prop, value, receiver); 
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出：Alice

怎么样，是不是通过使用 Reflect ，让代码编写和维护，变得更简单了。

Reflect 的必要性

以下是使用 Reflect 的一些优势：

1. 默认行为的一致性：Reflect 对象提供了与大多数 Proxy traps 对应的方法，使得在进行对象操作时，可以保持一致的编程模式，且代码的可读性和可维护性很强。比如，使用 Reflect.get()、Reflect.set()、Reflect.has() 等，而不是直接访问对象属性或使用 in 操作符。
2. 更好的错误处理：Reflect 方法返回一个布尔值，可以清晰地指示操作是否成功，这使得错误处理更加直观。相比之下，传统的操作方法可能会抛出异常，需要通过 try...catch 来处理。
3. 函数式编程风格：Reflect 方法接受目标对象作为第一个参数，这允许你以函数式编程风格处理对象操作，而不是使用命令式编程风格。
4. 接收者（receiver）参数：Reflect 方法通常接受一个接收者参数，这允许你在调用方法时明确指定 this 的值，这在实现基于原型的继承和自定义 this 绑定时非常有用。

这里再详细说下接收者（receiver）参数这一块，不感兴趣的伙伴可以直接跳过这块。下面是一个示例，我们看下如何使用接收者参数来实现一个简单的自定义 this 绑定：

// 定义一个目标对象
const target = {
  name: 'Alice',
  age: 25,
  greet: function() {
    return `Hello, my name is ${this.name} and I am${this.age} years old.`;
  }
};

// 定义一个代理处理程序
const handler = {
  get(target, prop, receiver) {
    if (prop === 'greet') {
      // 使用 Reflect.get() 来调用目标对象的 greet 方法，并指定接收者
      return function(...args) {
        return Reflect.apply(target[prop], receiver, args);
      };
    }
    return Reflect.get(target, prop, receiver);
  }
};

// 创建代理对象
const proxy = new Proxy(target, handler);

// 调用代理对象的 greet 方法
console.log(proxy.greet()); // 输出：Hello, my name is Alice and I am 25 years old.

目标对象 target，有一个 greet 函数方法。

• 首先我们在 handler 中拦截了对 greet 方法的访问。
• 在 get 捕获器中，我们检查属性名是否为 greet，如果是，我们返回一个新的函数。
• 这个新函数使用 Reflect.apply() 来调用目标对象的 greet 方法，并指定接收者为代理对象 proxy。

这样，当调用 proxy.greet() 时，greet 方法内部的 this 将指向代理对象 proxy，而不是目标对象 target。

这使得我们能够在调用方法时自定义 this 的值，实现基于原型的继承和自定义 this 绑定。

Proxy 与 Reflect 的结合

上面我们通过Proxy的局限性和Reflect的必要性，介绍了为什么还需要Reflect，下面我们就进入实战，将这两者结合起来使用。

例如，以下代码使用Reflect实现了对目标对象属性的读取、设置和枚举的拦截：

const target = {
  name: '张三',
  age: 25
};
const handler = {
  get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    return Reflect.set(target, prop, value, receiver);
  },
  has(target, prop) {
    return Reflect.has(target, prop);
  },
  enumerate(target) {
    return Reflect.enumerate(target);
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出：张三
proxy.age = 30;
console.log(proxy.age); // 输出：30
console.log(Object.keys(proxy)); // 输出：["name", "age"]

高端的食材，往往只需要简单的烹饪，这样代码简洁！

总结

通过使用 Proxy，我们可以轻松地实现对象的代理和拦截操作。而Reflect 的引入为与 Proxy 的配合提供了统一和规范的方式来操作对象。比如:

• 我们可以实现“数据绑定和观察者模式”，用来实现数据的双向绑定，通过拦截对象属性的读取和设置操作，可以自动通知变更。
• 同时，也可以用来“验证和数据校验”，如校验form表单等。
• 以及扩展对象功能和方法劫持，添加自定义功能或修改现有功能。
• 还有很多。。。