Proxy Handler方法详解

JavaScript Proxy Handler 方法详解

Proxy 的第二个参数 handler 是一个"捕获器"(trap)对象,提供了14种可选的捕获方法,用于拦截目标对象的相应操作。下面我将完整介绍所有方法及其参数意义:

基础捕获器

  1. get(target, prop, receiver)

    • target: 目标对象

    • prop: 被访问的属性名

    • receiver: Proxy对象或继承Proxy的对象

    • 拦截操作:obj.propobj[prop]

  2. set(target, prop, value, receiver)

    • target: 目标对象

    • prop: 将被设置的属性名

    • value: 新属性值

    • receiver: 最初赋值的对象(通常是Proxy本身)

    • 拦截操作:obj.prop = value

  3. has(target, prop)

    • target: 目标对象

    • prop: 被检查的属性名

    • 拦截操作:prop in obj

函数相关捕获器

  1. apply(target, thisArg, argumentsList)

    • target: 目标函数

    • thisArg: 调用时的this值

    • argumentsList: 调用时的参数数组

    • 拦截操作:函数调用,如proxy(...args)

  2. construct(target, argumentsList, newTarget)

    • target: 目标构造函数

    • argumentsList: 构造函数参数列表

    • newTarget: 最初被调用的构造函数(通常是Proxy)

    • 拦截操作:new proxy(...args)

属性操作捕获器

  1. defineProperty(target, prop, descriptor)

    • target: 目标对象

    • prop: 属性名

    • descriptor: 属性描述符对象

    • 拦截操作:Object.defineProperty(obj, prop, desc)

  2. deleteProperty(target, prop)

    • target: 目标对象

    • prop: 要删除的属性名

    • 拦截操作:delete obj.prop

  3. getOwnPropertyDescriptor(target, prop)

    • target: 目标对象

    • prop: 属性名

    • 拦截操作:Object.getOwnPropertyDescriptor(obj, prop)

  4. getPrototypeOf(target)

    • target: 目标对象

    • 拦截操作:Object.getPrototypeOf(obj)

  5. setPrototypeOf(target, prototype)

    • target: 目标对象

    • prototype: 新的原型对象

    • 拦截操作:Object.setPrototypeOf(obj, proto)

  6. isExtensible(target)

    • target: 目标对象

    • 拦截操作:Object.isExtensible(obj)

  7. preventExtensions(target)

    • target: 目标对象

    • 拦截操作:Object.preventExtensions(obj)

  8. ownKeys(target)

    • target: 目标对象

    • 拦截操作:Object.getOwnPropertyNames(obj) + Object.getOwnPropertySymbols(obj)

特殊捕获器

  1. enumerate(target) (已废弃)

    • target: 目标对象

    • 拦截操作:for...in循环 (建议改用ownKeys)

使用示例

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    return Reflect.get(...arguments);
  },
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(...arguments);
  }
};
​
const proxy = new Proxy({}, handler);
proxy.name = 'Code Sage'; // 触发set trap
console.log(proxy.name);  // 触发get trap

最佳实践建议:在每个trap中使用Reflect对应方法确保保持默认行为,只在需要修改行为时才自定义实现


Proxy Handler方法详解
https://halo.jiangling.site/archives/proxy-handler
作者
你的降灵
发布于
2025年07月21日
许可协议