大棚建设的网站,wordpress修改标题,响应式网页设计平台,wordpress 允许ping1. 什么是proxy代理
代理#xff08;Proxy#xff09;是 JavaScript 中一种非常强大而灵活的功能。代理允许你拦截并覆盖对象的默认行为#xff0c;提供了一种拦截、定制和扩展对象操作的机制。
简单说#xff0c;就是在访问对象属性或者赋值时#xff0c;可以做一些额外…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 和 Johnproxy.age 23;console.log(proxy.age);//输出 property: age 和 23proxy.age 16;//Uncaught Error: 年龄必须大于等于 182. 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); // 输出 undefined4. 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 314. 动态属性生成
通过代理可以动态生成属性的值而不是静态地存储它们。
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
