JavaScript Proxy与Reflect API-js教程-PHP中文网

JavaScript Proxy与Reflect API

狼影

发布： 2025-10-18 23:00:05

原创

487人浏览过

Proxy可拦截对象操作，Reflect提供统一方法；如用set拦截赋值，将负数转为0，实现数据校验与代理控制。

javascript proxy与reflect api

JavaScript 中的 Proxy 和 Reflect 是一对强大的内置对象，它们让开发者能够更精细地控制对象的行为。Proxy 可以拦截并自定义对象的基本操作，而 Reflect 提供了一套统一的方法来执行这些操作，并与 Proxy 配合使用效果更佳。

Proxy：拦截对象操作

Proxy 用于创建一个对象的代理，从而可以拦截和重新定义对该对象的基本操作（如属性读取、赋值、枚举等）。它接受两个参数：目标对象和一个“处理器”（handler）对象，handler 定义了要拦截的操作。

常见拦截方法包括：

get(target, property)：拦截属性读取
set(target, property, value)：拦截属性赋值
has(target, property)：拦截 in 操作符
deleteProperty(target, property)：拦截 delete 操作
ownKeys(target)：拦截 Object.keys() 等键枚举

例如，实现一个自动将负数转为0的数值属性赋值：

const target = { score: 10 }; const proxy = new Proxy(target, { set(obj, prop, value) { if (prop === 'score' && value

Reflect：统一的对象操作 API

Reflect 不是构造函数，而是一个静态工具对象，提供与 Proxy handler 方法一一对应的方法。它的设计目的是让对象操作更可预测，并能更好地配合 Proxy 使用。

立即学习“Java免费学习笔记（深入）”；

使用 Reflect 的好处：

方法命名更一致，比如 Reflect.get()、Reflect.set()
返回值更合理，多数方法返回布尔值表示成功或失败
可以替代部分 Object 上的静态方法，行为更规范
在 Proxy 中使用 Reflect 能保证默认行为正确执行

比如，在 Proxy 中调用 Reflect 来保留原始行为：

JavaScript 拖放排序插件Sortable

查看详情

Proxy 与 Reflect 协同工作

在编写 Proxy handler 时，推荐使用 Reflect 对应方法来完成默认操作。这样代码更清晰，也避免了 this 指向等问题。

例如，实现一个只读视图：

如果需要在拦截中保留原逻辑，就用 Reflect：

set(target, property, value, receiver) { // 可以添加验证逻辑 if (typeof value !== 'number') { console.warn(`${property} 必须是数字`); return false; } // 使用 Reflect.set 确保正确触发 setter（包括继承链上的） return Reflect.set(target, property, value, receiver); }

基本上就这些。Proxy 提供拦截能力，Reflect 提供标准操作接口，两者结合能让 JavaScript 对象行为更加灵活可控。理解它们的协作方式，有助于写出更健壮的元编程代码。

以上就是JavaScript Proxy与Reflect API的详细内容，更多请关注php中文网其它相关文章！