什么是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)//hello
console.log(proxy.msg)//hello
target.msg = 'morning';
console.log(target.msg)//morning
console.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' 和 23
proxy.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"，并且返回 undefined
console.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"