Proxy Handler方法详解
JavaScript Proxy Handler 方法详解
Proxy 的第二个参数 handler 是一个"捕获器"(trap)对象,提供了14种可选的捕获方法,用于拦截目标对象的相应操作。下面我将完整介绍所有方法及其参数意义:
基础捕获器
get(target, prop, receiver)
target: 目标对象prop: 被访问的属性名receiver: Proxy对象或继承Proxy的对象拦截操作:
obj.prop或obj[prop]
set(target, prop, value, receiver)
target: 目标对象prop: 将被设置的属性名value: 新属性值receiver: 最初赋值的对象(通常是Proxy本身)拦截操作:
obj.prop = value
has(target, prop)
target: 目标对象prop: 被检查的属性名拦截操作:
prop in obj
函数相关捕获器
apply(target, thisArg, argumentsList)
target: 目标函数thisArg: 调用时的this值argumentsList: 调用时的参数数组拦截操作:函数调用,如
proxy(...args)
construct(target, argumentsList, newTarget)
target: 目标构造函数argumentsList: 构造函数参数列表newTarget: 最初被调用的构造函数(通常是Proxy)拦截操作:
new proxy(...args)
属性操作捕获器
defineProperty(target, prop, descriptor)
target: 目标对象prop: 属性名descriptor: 属性描述符对象拦截操作:
Object.defineProperty(obj, prop, desc)
deleteProperty(target, prop)
target: 目标对象prop: 要删除的属性名拦截操作:
delete obj.prop
getOwnPropertyDescriptor(target, prop)
target: 目标对象prop: 属性名拦截操作:
Object.getOwnPropertyDescriptor(obj, prop)
getPrototypeOf(target)
target: 目标对象拦截操作:
Object.getPrototypeOf(obj)
setPrototypeOf(target, prototype)
target: 目标对象prototype: 新的原型对象拦截操作:
Object.setPrototypeOf(obj, proto)
isExtensible(target)
target: 目标对象拦截操作:
Object.isExtensible(obj)
preventExtensions(target)
target: 目标对象拦截操作:
Object.preventExtensions(obj)
ownKeys(target)
target: 目标对象拦截操作:
Object.getOwnPropertyNames(obj)+Object.getOwnPropertySymbols(obj)
特殊捕获器
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对应方法确保保持默认行为,只在需要修改行为时才自定义实现