Proxy是JavaScript中用于创建代理对象的构造函数，可拦截对目标对象的操作。通过new Proxy(target, handler)语法实现，其中handler定义get、set等陷阱来控制属性读取和赋值行为，常用于数据校验与响应式系统。
JavaScript中的Proxy是一种强大的元编程工具，允许你拦截并自定义对象的基本操作。它让你能在访问、修改、删除属性等行为发生时插入逻辑，非常适合用于数据校验、日志记录、响应式系统构建等场景。
Proxy 是一个内置构造函数，可以创建一个代理对象，用来包装另一个对象（目标对象），从而拦截对该对象的各种操作。基本语法如下：
const proxy = new Proxy(target, handler);其中，target 是被代理的原始对象，handler 是一个配置对象，定义了哪些操作需要被拦截以及如何响应。
Handler对象中可以定义多个“陷阱”（traps），以下是几个最常用的拦截操作：
当你访问对象的某个属性时触发，可用于实现默认值、属性映射或访问控制。
const user = { name: 'Alice' }; const proxy = new Proxy(user, { get(target, prop) { if (prop in target) { console.log(`读取属性: ${prop}`); return target[prop]; } else { return '属性不存在'; } } }); console.log(proxy.name); // 读取属性: name → Alice console.log(proxy.age); // 属性不存在在设置属性值时调用，常用于数据验证或自动类型转换。
const data = {}; const validatedProxy = new Proxy(data, { set(target, prop, value) { if (prop === 'age') { if (typeof value !== 'number') { throw new TypeError('年龄必须是数字'); } if (value用于控制属性是否被认为存在于对象中。
const obj = { a: 1 }; const hiddenProxy = new Proxy(obj, { has(target, prop) { if (prop.startsWith('_')) return false; // 隐藏以下划线开头的属性 return prop in target; } }); console.log('a' in hiddenProxy); // true console.log('_secret' in hiddenProxy); // false可以防止某些关键属性被删除。
const config = { apikey: '123', url: 'https://api.example.com' }; const protectedProxy = new Proxy(config, { deleteProperty(target, prop) { if (prop === 'apikey') { throw new Error('apikey 不可删除'); } delete target[prop]; return true; } }); delete protectedProxy.url; // 成功 // delete protectedProxy.apikey; // 抛出错误当代理一个函数时，apply 可以拦截函数调用。
function sum(a, b) { return a + b; } const tracedSum = new Proxy(sum, { apply(target, thisArg, args) { console.log(`调用函数 ${target.name}，参数:`, args); return target.apply(thisArg, args); } }); console.log(tracedSum(2, 3)); // 输出： // 调用函数 sum，参数: [2, 3] // 5可用于控制类实例化过程。
class Person { constructor(name) { this.name = name; } } const PersonProxy = new Proxy(Person, { construct(target, args) { console.log('正在创建实例，参数:', args); const instance = new target(...args); instance.created = Date.now(); return instance; } }); const p = new PersonProxy('Bob'); console.log(p); // Person { name: 'Bob', created: 1700000000000 }基本上就这些核心用法。Proxy的强大在于它改变了我们对对象行为的控制粒度，使得JavaScript的元编程能力大幅提升。不过要注意性能影响，避免过度代理深层结构。合理使用，能极大提升代码的灵活性和可维护性。
以上就是JS Proxy拦截器_元编程技巧详解的详细内容，更多请关注php中文网其它相关文章！
编程怎么学习？编程怎么入门？编程在哪学？编程怎么学才快？不用担心，这里为大家提供了编程速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
944
收藏
