当前位置：首页 > news >正文

【ES6】JavaScript的Proxy：理解并实现高级代理功能

news 2025/7/14 21:49:58

在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)。

在这里插入图片描述