什么是JS的Proxy对象？-js教程-PHP中文网

Proxy对象通过拦截操作实现对象行为的自定义，其核心是new Proxy(target, handler)，handler中的陷阱如get、set可实现数据校验与日志记录，相比Object.defineProperty，Proxy能监听属性增删及更多操作，支持13种陷阱，覆盖对象操作全方面，结合Reflect可安全执行默认行为。

什么是js的proxy对象？

JavaScript的Proxy对象，在我看来，它就像是给一个普通对象披上了一层“魔法外衣”或者说“隐形斗篷”。它允许你在对这个对象进行各种操作（比如读取属性、设置属性、调用方法等）之前，先进行拦截和自定义处理。你可以把它理解为一个中间人，所有对原始对象的操作，都必须先经过这个Proxy的“同意”和“处理”。它提供了一种非侵入式的方式来扩展或修改对象的行为，而无需直接修改原始对象本身。

解决方案

Proxy对象的核心在于

new Proxy(target, handler)

登录后复制

这个构造函数。这里的

target

登录后复制

是你想要代理的原始对象，而

handler

登录后复制

则是一个包含了各种“陷阱”（traps）的对象。这些陷阱就是一些方法，它们定义了当对Proxy对象执行特定操作时应该如何响应。

举个例子，当你尝试读取Proxy对象的某个属性时，如果

handler

登录后复制

里定义了

get

登录后复制

方法，那么这个

get

登录后复制

方法就会被触发，而不是直接去读取

target

登录后复制

的属性。你可以在

get

登录后复制

方法里加入自己的逻辑，比如数据校验、权限判断、缓存、或者仅仅是记录一次访问日志，然后再决定是否返回原始值或者一个修改过的值。

这种机制的强大之处在于，它几乎可以拦截所有针对对象的基本操作，包括但不限于：

属性访问 (
```
get
```
登录后复制
,
```
set
```
登录后复制
)
属性枚举 (
```
has
```
登录后复制
,
```
ownKeys
```
登录后复制
)
函数调用 (
```
apply
```
登录后复制
)
构造函数调用 (
```
construct
```
登录后复制
)
属性定义与删除 (
```
defineProperty
```
登录后复制
,
```
deleteProperty
```
登录后复制
)
原型链操作 (
```
getPrototypeOf
```
登录后复制
,
```
setPrototypeOf
```
登录后复制
)

通过这些陷阱，我们能够非常精细地控制对象的行为，实现很多传统方法难以优雅实现的功能，比如响应式数据系统、权限控制、数据绑定、对象虚拟化等等。它的出现，无疑为JavaScript带来了更深层次的元编程能力。

JavaScript Proxy对象与Object.defineProperty有什么区别？

谈到Proxy，很多人自然会联想到

Object.defineProperty

登录后复制

，毕竟两者都能在某种程度上实现对对象属性的拦截。但说实话，它们的设计哲学和能力范围有着本质的区别。在我看来，

Object.defineProperty

登录后复制

更像是“属性级别的外科手术”，而Proxy则更像“对象级别的安保系统”。

Object.defineProperty

登录后复制

主要关注的是单个属性的定义和行为控制。你可以用它来定义一个属性的getter和setter，或者控制它的可写、可配置、可枚举性。它的缺点在于，如果你想监听一个对象的所有属性，或者一个嵌套对象的深层属性，你需要递归地对每一个属性调用

defineProperty

登录后复制

，这在处理复杂或动态结构的对象时会变得非常繁琐和低效。更要命的是，它无法监听属性的添加和删除，也无法拦截像

in

登录后复制

操作符、函数调用、甚至

new

登录后复制

操作符这样的行为。

而Proxy则完全不同，它是在对象层面进行拦截。一旦你创建了一个对象的Proxy，所有针对这个Proxy对象的操作都会被它的

handler

登录后复制

捕获。这意味着它能够监听属性的添加和删除，因为这些操作也会触发相应的陷阱（如

set

登录后复制

和

deleteProperty

登录后复制

）。而且，Proxy提供了多达13种不同的陷阱，覆盖了对象操作的方方面面，包括函数调用（

apply

登录后复制

）、构造函数调用（

construct

登录后复制

）等，这是

Object.defineProperty

登录后复制

望尘莫及的。

简单来说，

Object.defineProperty

登录后复制

是细粒度的，需要你明确指定要拦截哪个属性；而Proxy是粗粒度的，它能拦截对整个对象的任何操作。在构建像Vue 3这样的响应式系统时，Proxy的优势就体现得淋漓尽致，它解决了

Object.defineProperty

登录后复制

在监听新增/删除属性以及数组变动方面的固有缺陷，让API设计更加简洁和强大。

如何使用JS Proxy对象实现数据校验和日志记录？

Proxy对象在数据校验和日志记录方面有着天然的优势，因为它能轻松拦截属性的读写和方法的调用。这在我实际开发中，尤其在需要对外部传入的数据进行严格验证或者追踪对象状态变化时，显得非常实用。

数据校验示例： 假设我们有一个用户对象，我们希望确保其

age

登录后复制

属性必须是数字且大于0，

name

登录后复制

属性必须是非空字符串。

const user = {
  name: 'Alice',
  age: 30
};

const userValidator = {
  set(target, property, value, receiver) {
    if (property === 'age') {
      if (typeof value !== 'number' || value <= 0) {
        throw new TypeError('年龄必须是大于0的数字。');
      }
    }
    if (property === 'name') {
      if (typeof value !== 'string' || value.trim() === '') {
        throw new TypeError('姓名不能为空。');
      }
    }
    // 使用Reflect确保默认行为被执行，即实际设置属性
    return Reflect.set(target, property, value, receiver);
  }
};

const validatedUser = new Proxy(user, userValidator);

console.log(validatedUser.name); // Alice

validatedUser.age = 25; // 正常设置
console.log(validatedUser.age); // 25

try {
  validatedUser.age = -5; // 抛出 TypeError: 年龄必须是大于0的数字。
} catch (e) {
  console.error(e.message);
}

try {
  validatedUser.name = ''; // 抛出 TypeError: 姓名不能为空。
} catch (e) {
  console.error(e.message);
}

登录后复制

在这个例子中，

set

登录后复制

陷阱会在每次尝试修改

validatedUser

登录后复制

的属性时触发，我们可以在其中加入自定义的校验逻辑。如果校验失败，就抛出错误，阻止不合法的数据写入。

新鲜水果网站销售模板

网站模板是能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东西？Javascript就是适应动态网页制作的需要而诞生的

查看详情

日志记录示例： 我们也可以用Proxy来记录对象属性的访问和修改，这对于调试或者审计对象状态变化非常有用。

const product = {
  id: 'P001',
  price: 99.99,
  stock: 100
};

const productLogger = {
  get(target, property, receiver) {
    console.log(`[LOG] 访问属性: ${property}`);
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log(`[LOG] 修改属性: ${property} 从 ${target[property]} 到 ${value}`);
    return Reflect.set(target, property, value, receiver);
  },
  apply(target, thisArg, argumentsList) {
    console.log(`[LOG] 调用方法: ${target.name} with args: ${JSON.stringify(argumentsList)}`);
    return Reflect.apply(target, thisArg, argumentsList);
  }
};

const loggedProduct = new Proxy(product, productLogger);

console.log(loggedProduct.price); // [LOG] 访问属性: price, 输出 99.99
loggedProduct.stock = 90;        // [LOG] 修改属性: stock 从 100 到 90
console.log(loggedProduct.stock); // [LOG] 访问属性: stock, 输出 90

// 假设product有一个方法
product.calculateTotal = function(quantity) {
  return this.price * quantity;
};
const loggedProductWithMethod = new Proxy(product, productLogger);
console.log(loggedProductWithMethod.calculateTotal(2)); // [LOG] 访问属性: calculateTotal, [LOG] 调用方法: calculateTotal with args: [2], 输出 199.98

登录后复制

这里，

get

登录后复制

陷阱记录了属性的读取，

set

登录后复制

陷阱记录了属性的修改，而

apply

登录后复制

陷阱（如果目标是函数）则记录了方法的调用。通过这种方式，我们可以在不修改原始

product

登录后复制

对象代码的情况下，为其添加强大的日志功能。关键在于，在陷阱的最后，我们通常会使用

Reflect

登录后复制

对象来执行原始的默认操作，确保代理行为在添加额外逻辑的同时，不会改变对象原本应有的行为。

JS Proxy对象有哪些常见的陷阱（Traps）及其作用？

Proxy对象之所以强大，很大程度上是因为它提供了丰富的“陷阱”（Traps），这些陷阱都是

handler

登录后复制

对象中的方法，用于拦截并自定义对目标对象执行的特定操作。理解这些陷阱是掌握Proxy的关键。以下是一些我经常用到或认为非常重要的陷阱：

```
get(target, property, receiver)
```
登录后复制
- 作用： 拦截对对象属性的读取操作。无论是通过
```
.
```
  登录后复制
  运算符还是
```
[]
```
  登录后复制
  方括号访问属性，都会触发它。
- 场景： 数据格式化、默认值提供、权限检查、属性懒加载、日志记录。
- 示例： 在访问一个不存在的属性时返回一个默认值，而不是
```
undefined
```
  登录后复制
  。
```
set(target, property, value, receiver)
```
登录后复制
- 作用： 拦截对对象属性的设置操作。
- 场景： 数据校验、脏数据标记、响应式系统的数据更新通知、访问控制、日志记录。
- 示例： 确保某个属性只能设置为特定类型的值。
```
apply(target, thisArg, argumentsList)
```
登录后复制
- 作用： 拦截对函数对象的调用。如果
```
target
```
  登录后复制
  是一个函数，并且你尝试调用它（如
```
proxyFn()
```
  登录后复制
  ），就会触发此陷阱。
- 场景： 函数参数校验、函数执行前后的日志记录、函数节流/防抖、函数柯里化。
- 示例： 在函数执行前打印参数，执行后打印返回值。
```
construct(target, argumentsList, newTarget)
```
登录后复制
- 作用： 拦截
```
new
```
  登录后复制
  操作符。当
```
target
```
  登录后复制
  是一个构造函数，并且你尝试
```
new proxyFn()
```
  登录后复制
  时，此陷阱会被触发。
- 场景： 自定义构造函数行为、单例模式实现、限制实例化。
- 示例： 在创建新实例时添加额外的属性或修改构造过程。
```
has(target, property)
```
登录后复制
- 作用： 拦截
```
in
```
  登录后复制
  操作符。当检查某个属性是否存在于对象中时（如
```
'prop' in proxyObj
```
  登录后复制
  ），会触发此陷阱。
- 场景： 隐藏特定属性、虚拟属性判断、权限检查。
- 示例： 让某些内部属性在
```
in
```
  登录后复制
  操作符下表现为不存在。
```
deleteProperty(target, property)
```
登录后复制
- 作用： 拦截
```
delete
```
  登录后复制
  操作符。当尝试删除对象的属性时（如
```
delete proxyObj.prop
```
  登录后复制
  ），会触发此陷阱。
- 场景： 阻止特定属性被删除、删除前的确认、日志记录。
- 示例： 阻止删除一个关键配置属性。
```
ownKeys(target)
```
登录后复制
- 作用： 拦截
```
Object.keys()
```
  登录后复制
  、
```
Object.getOwnPropertyNames()
```
  登录后复制
  、
```
Object.getOwnPropertySymbols()
```
  登录后复制
  等方法，以及
```
for...in
```
  登录后复制
  循环。
- 场景： 过滤或添加对象的可枚举属性、隐藏内部属性。
- 示例： 让
```
Object.keys()
```
  登录后复制
  只返回部分属性名。

在使用这些陷阱时，一个非常好的实践是结合

Reflect

登录后复制

对象。

Reflect

登录后复制

对象提供了与Proxy陷阱同名的方法，它们的作用是执行对应操作的默认行为。比如，在

get

登录后复制

陷阱中，你通常会这样写

return Reflect.get(target, property, receiver);

登录后复制

，这表示在执行完你的自定义逻辑后，将属性读取操作转发给原始目标对象。这样做的好处是，你不需要记住原始操作的具体实现细节，只需调用

Reflect

登录后复制

对应的方法即可，这让代码更简洁、更健壮，并且避免了

this

登录后复制

指向问题。

以上就是什么是JS的Proxy对象？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript数据绑定_双向绑定与脏检查机制移动端JavaScript_Capacitor混合开发 JavaScript框架设计_虚拟DOM与响应式系统实现 JavaScript设计模式_观察者与发布订阅实现 JavaScript_网络安全与XSS防护策略