什么是proxy代理？

1. 什么是proxy代理

代理（Proxy）是 JavaScript 中一种非常强大而灵活的功能。代理允许你拦截并覆盖对象的默认行为，提供了一种拦截、定制和扩展对象操作的机制。

简单说，就是在访问对象属性或者赋值时，可以做一些额外的操作。

代理通过使用 Proxy 对象来创建。
Proxy 接受两个参数：目标对象（被代理的对象）和一个处理程序对象（handler）。处理程序对象又分为了get()捕获器和set()捕获器。

先看一个简单的栗子，创建一个空代理，不会做任何的额外操作。

        const target = {msg: 'hello'};const handler = {};const proxy = new Proxy(target, handler);//属性会访问同一个值console.log(target.msg)//helloconsole.log(proxy.msg)//hellotarget.msg = 'morning';console.log(target.msg)//morningconsole.log(proxy.msg)//morning// 严格相等可以用来区分代理对象和目标对象console.log(target === proxy); // false 

要想定义额外的操作，要在handler中定义捕获器。通过代理对象访问属性，会触发get()捕获器; 通过代理对象给属性赋值。会触发set()捕获器。

        const John = {name: 'John',age: 20};const handler = {// 这里就额外输出了属性名get: function (target, property, receiver) {console.log(`property: ${property}`);return Reflect.get(target, property, receiver);//获取对象的属性值},set: function (target, property, value, receiver) {if (property === 'age') {if (value < 18) {throw new Error('年龄必须大于等于 18');}}return Reflect.set(target, property, value, receiver);//设置对象的属性}}const proxy = new Proxy(John, handler);// 直接通过对象访问属性，不会触发代理的 get 捕获器console.log(John.name); // 输出 'John'// 通过代理对象访问属性，会触发代理的 get 捕获器console.log(proxy.name); // 输出 'property: name' 和 'John'proxy.age = 23;console.log(proxy.age);//输出 'property: age' 和 23proxy.age = 16;//Uncaught Error: 年龄必须大于等于 18

2. Reflect.get()

在JavaScript中，我们通常通过点符号（obj.property）或方括号（obj['property']）来访问对象的属性。而 Reflect.get() 也是获取对象的属性值。

Reflect.get(target, propertyKey, receiver)

• target：目标对象，即从这个对象中获取属性值。
• propertyKey：属性键，即要获取的属性的键名。
• receiver：可选，如果提供，那么 receiver 将作为 this 值传递给目标对象的 getter 方法。如果省略，将使用 target 作为 this 值。

const person = { name: 'John', age: 30 };// 通过点符号
const name1 = person.name;// 通过方括号
const name2 = person['name'];//使用 Reflect.get 获取属性值
const name3 = Reflect.get(person, 'name');

3. Reflect.get()与常见获取对象属性值有什么不同？

相同点：当访问不存在属性时都会返回undefined

const person = { age: 30 };console.log(person.name);                  // 输出 undefined
console.log(Reflect.get(person, 'name'));  // 输出 undefined

不同点：Reflect.get()会触发代理的捕获器，而用点符号、方括号去访问不会。

        const person = { age: 30 };const handler = {get: function (target, property) {console.log(`property: ${property}`);return Reflect.get(target, property);}};console.log(Reflect.get(person, 'name'));  // 输出 "property: name"，并且返回 undefinedconsole.log(person.name);                  // 输出 undefined

4. proxy代理的应用

1. 拦截和定制对象操作

通过代理，你可以使用捕获器（例如 get、set、apply 等）来拦截和定制对象上的操作。也就是在操作执行前后执行自定义逻辑，比如记录日志、验证数据、实现观察者模式等。

const handler = {get: function(target, property, receiver) {console.log(`Getting property: ${property}`);return Reflect.get(target, property, receiver);},set: function(target, property, value, receiver) {console.log(`Setting property: ${property} to ${value}`);return Reflect.set(target, property, value, receiver);}
};const proxy = new Proxy({}, handler);
proxy.name = 'John'; // 输出 "Setting property: name to John"
console.log(proxy.name); // 输出 "Getting property: name" 和 "John"

2. 数据验证和保护

通过代理，可以实现对对象属性的更严格的验证，以确保数据的完整性和安全性。

const validator = {set: function(target, prop, value) {if (prop === 'age' && (typeof value !== 'number' || value <= 0)) {throw new Error('请输入正确的年龄！');}return Reflect.set(target, prop, value);}
};const person = new Proxy({}, validator);
person.age = 30; // 设置成功
person.age = 'thirty'; // 抛出错误：请输入正确的年龄！

3. 观察者模式

通过代理，可以实现观察者模式，即对对象的变化进行监听，并在变化发生时执行相应的操作。

function createObservable(obj, onChange) {return new Proxy(obj, {set: function(target, prop, value, receiver) {onChange(prop, value);return Reflect.set(target, prop, value, receiver);}});
}const user = { name: 'John', age: 30 };
const observedUser = createObservable(user, (prop, value) => {console.log(`Property ${prop} changed to ${value}`);
});observedUser.age = 31; // 输出 "Property age changed to 31"

4. 动态属性生成

通过代理，可以动态生成属性的值，而不是静态地存储它们。

const dynamicProperties = new Proxy({}, {get: function(target, prop, receiver) {if (!(prop in target)) {target[prop] = `Dynamic value for ${prop}`;}return Reflect.get(target, prop, receiver);}
});console.log(dynamicProperties.name); // 输出 "Dynamic value for name"