proxy
是 JavaScript 中的一个内置对象,它提供了一种机制来拦截并自定义对象的基本操作。
通过使用 proxy
,我们可以在对象上定义自定义行为,例如拦截属性访问、函数调用、构造函数调用等。
proxy 对象用于创建一个对象的代理,是在目标对象之前架设一个拦截,外界对该对象的访问,都必须先通过这个拦截。通过这种机制,就可以对外界的访问进行过滤和改写。
ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。
var proxy = new Proxy(target, handler);
target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。
const obj = {};
const proxy=new Proxy(obj,{
get:function(target,propKey){
return 1
}
})
console.log(proxy.name) // 1
console.log(proxy.value) // 1
在上面代码中,Proxy接受两个参数,第一个是要代理的目标对象(上面的是空对象obj),在没有设置Proxy的情况下,对proxy的操作就是访问obj。第二个参数是配置对象,对每个被代理的操作,需要提供一个对应的处理函数,这个函数用于拦截对应的操作。
上面代码中,配置对象有个get方法,用来拦截对目标对象属性的访问请求。get方法中的两个参数分别是目标对象和所要访问的属性。由于设置的是返回1,所以访问任何属性都得到1。
下面是 proxy
的一些常用属性和方法:
属性:
Proxy.revocable(target, handler)
: 创建一个可撤销的 Proxy 对象。返回一个包含 proxy
和 revoke
函数的对象。通过调用 revoke
函数可以取消代理对象。proxyHandler.getPrototypeOf(target)
: 拦截对 Object.getPrototypeOf(proxy)
的调用。proxyHandler.setPrototypeOf(target, prototype)
: 拦截对 Object.setPrototypeOf(proxy, prototype)
的调用。proxyHandler.isExtensible(target)
: 拦截对 Object.isExtensible(proxy)
的调用。proxyHandler.preventExtensions(target)
: 拦截对 Object.preventExtensions(proxy)
的调用。proxyHandler.getOwnPropertyDescriptor(target, property)
: 拦截对 Object.getOwnPropertyDescriptor(proxy, property)
的调用。proxyHandler.defineProperty(target, property, descriptor)
: 拦截对 Object.defineProperty(proxy, property, descriptor)
或 Object.defineProperties(proxy, properties)
的调用。proxyHandler.has(target, property)
: 拦截 property in proxy
的操作。proxyHandler.get(target, property, receiver)
: 拦截属性读取操作。proxyHandler.set(target, property, value, receiver)
: 拦截属性写入操作。proxyHandler.deleteProperty(target, property)
: 拦截对 delete proxy.property
的调用。proxyHandler.ownKeys(target)
: 拦截 Object.getOwnPropertyNames(proxy)
、Object.getOwnPropertySymbols(proxy)
、Object.keys(proxy)
的调用。proxyHandler.apply(target, thisArg, argumentsList)
: 拦截函数调用操作。proxyHandler.construct(target, argumentsList, newTarget)
: 拦截通过 new
关键字构造对象的操作。以上是 proxy
的一些常用属性和方法,可以根据需要选择相应的拦截器进行功能定制。请注意,这里的 proxyHandler
是一个包含各种拦截器方法的对象,用于定义代理对象的行为。
当使用 proxy
对象时,可以根据需要使用各种属性和方法来定制其行为。下面是一些示例说明:
1. 拦截属性访问:
const target = {
name: 'Alice',
age: 25
};
const proxyHandler = {
get(target, property, receiver) {
console.log(`获取属性 ${property}`);
return target[property];
}
};
const proxy = new Proxy(target, proxyHandler);
console.log(proxy.name); // 获取属性 name,输出 "Alice"
console.log(proxy.age); // 获取属性 age,输出 25
2. 拦截属性写入:
const target = {
name: 'Alice',
age: 25
};
const proxyHandler = {
set(target, property, value, receiver) {
console.log(`设置属性 ${property} 值为 ${value}`);
target[property] = value;
return true;
}
};
const proxy = new Proxy(target, proxyHandler);
proxy.age = 30; // 设置属性 age 值为 30,输出 "设置属性 age 值为 30"
console.log(proxy.age); // 输出 30
3. 拦截函数调用:
function sum(a, b) {
return a + b;
}
const proxyHandler = {
apply(target, thisArg, argumentsList) {
console.log('调用函数 sum');
return target(...argumentsList);
}
};
const proxy = new Proxy(sum, proxyHandler);
console.log(proxy(2, 3)); // 调用函数 sum,输出 5
4. 拦截对象的构造函数调用:
class Person {
constructor(name) {
this.name = name;
}
}
const proxyHandler = {
construct(target, argumentsList, newTarget) {
console.log('调用构造函数 Person');
return new target(...argumentsList);
}
};
const ProxyPerson = new Proxy(Person, proxyHandler);
const alice = new ProxyPerson('Alice'); // 调用构造函数 Person
console.log(alice.name); // 输出 "Alice"
以上示例只是 proxy
的一小部分功能,你可以根据自己的需求使用不同的拦截器方法来自定义对象的行为。
参考文档