本文共 1770 字，大约阅读时间需要 5 分钟。
Reflect 和 Proxy 是 JavaScript 中的两个核心特性，它们分别服务于不同的目的，但常常结合使用以实现对象操作的拦截和自定义处理。
Proxy 是 ES6 引入的一种对象包装机制。通过 Proxy，您可以创建一个代理对象，该对象可以拦截并自定义基础对象的操作。拦截的核心机制通过定义各种“陷阱”（Traps）方法来实现。常见的陷阱方法包括：
get(target, propKey, receiver)set(target, propKey, value, receiver)apply(target, thisArg, argumentsList)construct(target, argumentsList, newTarget)has(target, propKey)deleteProperty(target, propKey)ownKeys(target)Reflect 是一个内置对象，提供了一套完整的操作对象属性的静态方法。这些方法与 JavaScript 中的对象操作符相对应。Reflect 提供的方法包括：
Reflect.get()Reflect.set()Reflect.has()Reflect.apply()Reflect.construct()Reflect 的优势在于其提供了统一且明确的 API，并且返回值通常更加明确。例如，Reflect.set() 返回一个布尔值，表示设置操作是否成功。
Reflect 和 Proxy 结合使用可以实现对对象属性的读写操作的拦截。以下是一个详细的示例：
const originalObject = { message: 'Hello from the original object', count: 0};const handler = { get(target, property, receiver) { console.log(`Reading property ${property}`); return Reflect.get(target, property, receiver); }, set(target, property, value, receiver) { console.log(`Setting property ${property} to ${value}`); if (property === 'count') { if (typeof value !== 'number') { throw new TypeError('Count must be a number'); } console.log('Count updated, now:', target.count); } return Reflect.set(target, property, value, receiver); }};const proxyObject = new Proxy(originalObject, handler);// 读取属性console.log(proxyObject.message); // 输出："Reading property message"// 设置属性proxyObject.count = 10;console.log(proxyObject.count); // 输出："Count updated, now: 10"try { proxyObject.invalidProperty = 'non-number';} catch (error) { console.error(error); // 抛出错误，因为试图将非数字赋值给 count} 在这个示例中，Proxy 对象 proxyObject 作为原始对象 originalObject 的代理，它的所有操作都被转发到 handler 对象中的相应方法。通过拦截 get 和 set 方法，实现了对对象属性的读写操作的自定义控制。
转载地址：http://pgxfk.baihongyu.com/