各位观众，大家好！今天咱们来聊聊 JavaScript 中一对好基友：Proxy 和 Reflect。 这俩货可不是普通的 API， 它们是元编程世界的敲门砖，能让你在 JavaScript 里玩出各种花样。 今天咱们就一起揭开它们的神秘面纱，看看它们的设计哲学，再深入到一些高级应用场景中。
一、Proxy：拦截与掌控
Proxy 就像一道门卫，站在你对象的前面。 任何想要访问或修改你对象的人，都必须先经过它这一关。 这使得你可以在对象操作前后进行拦截、验证、甚至修改行为。
-
设计哲学：控制对象的外部行为
Proxy的核心思想是“控制”。 它允许你定义一个对象外部行为的自定义逻辑，而无需直接修改对象本身。 这遵循了“开闭原则”，即对扩展开放，对修改关闭。想象一下，你有一个重要的对象，里面存着用户的敏感信息。 你不想让任何人都随便访问它，必须进行权限验证。 这时，
Proxy就派上用场了。const user = { name: '张三', age: 30, sensitiveData: '银行卡号：6222...' }; const proxyUser = new Proxy(user, { get: function(target, property, receiver) { if (property === 'sensitiveData') { // 权限验证，比如检查用户是否登录，是否具有访问权限 if (!isUserLoggedIn() || !hasPermission('viewSensitiveData')) { return '无权访问'; } } return Reflect.get(target, property, receiver); // 必须使用 Reflect! } }); console.log(proxyUser.name); // "张三" console.log(proxyUser.sensitiveData); // "无权访问" (如果用户未登录或没有权限)在这个例子中，
Proxy拦截了对sensitiveData属性的访问，并进行了权限验证。 如果用户没有权限，就返回“无权访问”。 -
常用 Handler 方法
Proxy的强大之处在于它提供了丰富的 Handler 方法，可以拦截各种对象操作。 下面是一些常用的 Handler 方法：get(target, property, receiver): 拦截对象的读取属性操作。set(target, property, value, receiver): 拦截对象的设置属性操作。has(target, property): 拦截in操作符。deleteProperty(target, property): 拦截delete操作符。apply(target, thisArg, argumentsList): 拦截函数的调用。construct(target, argumentsList, newTarget): 拦截new操作符。getPrototypeOf(target): 拦截Object.getPrototypeOf()。setPrototypeOf(target, prototype): 拦截Object.setPrototypeOf()。isExtensible(target): 拦截Object.isExtensible()。preventExtensions(target): 拦截Object.preventExtensions()。getOwnPropertyDescriptor(target, property): 拦截Object.getOwnPropertyDescriptor()。defineProperty(target, property, descriptor): 拦截Object.defineProperty()。ownKeys(target): 拦截Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()。
每个 Handler 方法都有其特定的用途，可以让你精细地控制对象的行为。
二、Reflect：元编程的基础设施
Reflect 是一个内建对象，它提供了一组与对象操作相对应的方法。 这些方法与 Proxy 的 Handler 方法一一对应，可以让你在 Handler 方法中调用默认的对象行为。
-
设计哲学：提供对象操作的标准化接口
Reflect的核心思想是“标准化”。 它提供了一套标准化的方法来操作对象，避免了直接使用一些语言内置的操作符（比如.，[]，delete）。 这使得代码更加清晰、可维护，并且更容易进行元编程。想想看，以前我们读取一个对象的属性，要么用
obj.prop，要么用obj['prop']。 这两种方式看起来差不多，但实际上有一些细微的差别。 比如，obj.prop在obj为null或undefined时会报错，而obj['prop']不会。Reflect提供了一种更统一的方式：const obj = { name: '李四' }; // 使用 Reflect.get 读取属性 const name = Reflect.get(obj, 'name'); console.log(name); // "李四"使用
Reflect.get避免了直接使用.或[]操作符，使得代码更加健壮。 -
Reflect的方法与ProxyHandler 的对应关系Reflect的方法与Proxy的 Handler 方法一一对应，这使得它们可以完美地配合使用。 在Proxy的 Handler 方法中，你可以使用Reflect的方法来执行默认的对象行为，然后再添加自定义的逻辑。Proxy Handler Reflect 方法 说明 get(target, prop, receiver)Reflect.get(target, prop, receiver)读取属性值 set(target, prop, value, receiver)Reflect.set(target, prop, value, receiver)设置属性值 has(target, prop)Reflect.has(target, prop)检查对象是否具有该属性 deleteProperty(target, prop)Reflect.deleteProperty(target, prop)删除属性 apply(target, thisArg, args)Reflect.apply(target, thisArg, args)调用函数 construct(target, args)Reflect.construct(target, args)使用 new运算符创建对象getPrototypeOf(target)Reflect.getPrototypeOf(target)获取对象的原型 setPrototypeOf(target, prototype)Reflect.setPrototypeOf(target, prototype)设置对象的原型 isExtensible(target)Reflect.isExtensible(target)检查对象是否可扩展 preventExtensions(target)Reflect.preventExtensions(target)防止对象被扩展 getOwnPropertyDescriptor(target, prop)Reflect.getOwnPropertyDescriptor(target, prop)获取属性的描述符 defineProperty(target, prop, descriptor)Reflect.defineProperty(target, prop, descriptor)定义或修改属性的描述符 ownKeys(target)Reflect.ownKeys(target)返回对象自身拥有的属性键的数组 (包括字符串键和符号键) 注意：在
ProxyHandler 内部，务必 使用Reflect对应的方法来执行默认的对象行为。 否则，可能会导致一些意想不到的问题，比如无限递归。
三、Proxy 和 Reflect 的高级应用
Proxy 和 Reflect 的组合，可以让你在元编程领域大展拳脚。 下面是一些高级应用场景：
-
数据验证
在设置对象的属性时，可以使用
Proxy进行数据验证，确保数据的有效性。const validator = { set: function(target, property, value) { if (property === 'age') { if (typeof value !== 'number' || value <= 0 || value > 150) { throw new Error('年龄必须是 0 到 150 之间的数字'); } } return Reflect.set(target, property, value); } }; const person = new Proxy({}, validator); person.age = 30; // 正常设置 console.log(person.age); // 30 try { person.age = -10; // 抛出错误 } catch (error) { console.error(error.message); // "年龄必须是 0 到 150 之间的数字" }在这个例子中，
Proxy拦截了age属性的设置操作，并验证了值的有效性。 如果值不符合要求，就抛出错误。 -
日志记录
可以使用
Proxy记录对象的访问和修改操作，方便调试和审计。function createLoggerProxy(target) { return new Proxy(target, { get: function(target, property, receiver) { console.log(`读取属性：${property}`); return Reflect.get(target, property, receiver); }, set: function(target, property, value, receiver) { console.log(`设置属性：${property} = ${value}`); return Reflect.set(target, property, value, receiver); } }); } const data = { name: '王五', score: 80 }; const loggedData = createLoggerProxy(data); console.log(loggedData.name); // "读取属性：name"，然后输出 "王五" loggedData.score = 90; // "设置属性：score = 90"在这个例子中，
Proxy拦截了属性的读取和设置操作，并记录了日志。 -
实现观察者模式 (Observer Pattern)
Proxy可以用来实现观察者模式，当对象的状态发生变化时，自动通知相关的观察者。function createObservable(target, onChange) { return new Proxy(target, { set: function(target, property, value, receiver) { const success = Reflect.set(target, property, value, receiver); if (success) { onChange(property, value); // 通知观察者 } return success; } }); } const data = { name: '赵六', status: 'idle' }; const observableData = createObservable(data, (property, value) => { console.log(`属性 ${property} 变为 ${value}`); }); observableData.status = 'working'; // "属性 status 变为 working"在这个例子中，
Proxy拦截了属性的设置操作，并在设置成功后通知观察者。 -
实现计算属性 (Computed Properties)
Proxy可以用来实现计算属性，当依赖的属性发生变化时，自动更新计算属性的值。function createComputed(target, computedProperties) { return new Proxy(target, { get: function(target, property, receiver) { if (computedProperties.hasOwnProperty(property)) { return computedProperties[property].call(receiver); // 计算属性的值 } return Reflect.get(target, property, receiver); } }); } const data = { firstName: '钱', lastName: '七' }; const computedData = createComputed(data, { fullName: function() { return `${this.firstName} ${this.lastName}`; } }); console.log(computedData.fullName); // "钱 七" data.firstName = '孙'; console.log(computedData.fullName); // 仍然是 "钱 七"，因为 computedData 没有监听原始对象的属性变化注意： 上面的代码只是一个简单的示例，它没有实现对依赖属性的监听。 要实现真正的计算属性，需要结合观察者模式，当依赖的属性发生变化时，更新计算属性的值。
-
模拟私有变量
虽然 JavaScript 没有真正的私有变量，但可以使用
Proxy模拟私有变量的行为。function createPrivateScope() { const privateData = new WeakMap(); // 使用 WeakMap 存储私有数据 return function(target) { return new Proxy(target, { get: function(target, property, receiver) { if (property.startsWith('_')) { throw new Error('不能访问私有属性'); } return Reflect.get(target, property, receiver); }, set: function(target, property, value, receiver) { if (property.startsWith('_')) { throw new Error('不能设置私有属性'); } return Reflect.set(target, property, value, receiver); }, defineProperties: function(target, props) { for (const property in props) { if (property.startsWith('_')) { throw new Error('不能定义私有属性'); } } return Reflect.defineProperties(target, props); } }); } } const protect = createPrivateScope(); class MyClass { constructor() { this.publicProperty = 'public'; this._privateProperty = 'private'; // 约定以下划线开头的属性为私有属性 } } const protectedInstance = protect(new MyClass()); console.log(protectedInstance.publicProperty); // "public" try { console.log(protectedInstance._privateProperty); // 抛出错误 } catch (error) { console.error(error.message); // "不能访问私有属性" } try { protectedInstance._privateProperty = 'new value'; // 抛出错误 } catch (error) { console.error(error.message); // "不能设置私有属性" }在这个例子中，我们约定以下划线开头的属性为私有属性。
Proxy拦截了对私有属性的访问和修改操作，并抛出错误。 虽然这并不是真正的私有变量，但可以有效地防止外部代码意外地访问或修改私有属性。
四、一些需要注意的点
-
性能影响： 使用
Proxy会带来一定的性能损耗，因为每次对象操作都需要经过Proxy的拦截。 因此，在性能敏感的场景中，需要谨慎使用Proxy。 -
递归陷阱： 在
Proxy的 Handler 方法中，如果直接访问目标对象，可能会导致无限递归。 务必 使用Reflect对应的方法来执行默认的对象行为。 -
调试困难：
Proxy的拦截行为可能会使调试变得更加困难。 可以使用debugger语句或日志记录来辅助调试。 -
兼容性：
Proxy是 ES6 的新特性，在一些老版本的浏览器中可能不支持。 需要使用 Polyfill 来提供兼容性。
总结
Proxy 和 Reflect 是 JavaScript 元编程的利器。 它们的设计哲学在于控制对象的外部行为和提供对象操作的标准化接口。 通过灵活地运用 Proxy 和 Reflect，你可以实现数据验证、日志记录、观察者模式、计算属性、模拟私有变量等高级功能。 当然，在使用它们的同时，也要注意性能影响、递归陷阱、调试困难和兼容性等问题。
希望今天的讲解能够帮助大家更好地理解 Proxy 和 Reflect，并在实际开发中灵活运用它们。 谢谢大家！