在JavaScript中,Proxy是一种能够拦截对对象的读取、设置等操作的机制。它们提供了一种方式,可以在执行基本操作之前或之后,对这些操作进行自定义处理。这种功能在许多高级编程场景中非常有用,比如实现数据验证、日志记录、权限控制等。
1、理解Proxy
在JavaScript中,对象具有一些基本操作,如属性查找、赋值、删除等。当你访问一个对象的属性时,JavaScript会直接返回该属性的值。然而,如果你使用Proxy来“代理”这个对象,那么在执行这些基本操作时,你就可以在JavaScript引擎执行基本操作之前或之后,插入自定义的处理逻辑。
2、创建Proxy
要创建一个Proxy,你需要使用Object.create()方法,并传入一个具有get和set方法的对象作为参数。get方法会在读取属性时被调用,set方法会在设置属性时被调用。
const target = { a: 1, b: 2 };
const handler = {get: function(target, prop, receiver) {console.log(`Reading ${prop}`);return Reflect.get(...arguments);},set: function(target, prop, value, receiver) {console.log(`Setting ${prop}`);return Reflect.set(...arguments);}
};const proxy = new Proxy(target, handler);
在上面的代码中,我们创建了一个名为target的对象,并定义了一个handler对象来处理对target的访问。然后我们使用new Proxy()构造函数创建了一个新的对象proxy,该对象会“代理”对target的访问。
同一个拦截器函数,可以设置拦截多个操作。
var handler = {get: function(target, name) {if (name === 'prototype') {return Object.prototype;}return 'Hello, ' + name;},apply: function(target, thisBinding, args) {return args[0];},construct: function(target, args) {return {value: args[1]};}
};var fproxy = new Proxy(function(x, y) {return x + y;
}, handler);fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true
对于可以设置、但没有设置拦截的操作,则直接落在目标对象上,按照原先的方式产生结果。
下面是 Proxy 支持的拦截操作一览,一共 13 种。
- get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy[‘foo’]。
- set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy[‘foo’] = v,返回一个布尔值。
- has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
- deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
- ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
- getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
- defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
- preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
- getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
- isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
- setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
- apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
- construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(…args)。