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