防疫站24小时在线咨询,网站经常被攻击,自己做视频网站只能用地址连接,北京朗晨网站建设proxy 属性与方法实例 proxy 属性与方法
proxy 是 JavaScript 中的一个内置对象#xff0c;它提供了一种机制来拦截并自定义对象的基本操作。
通过使用 proxy#xff0c;我们可以在对象上定义自定义行为#xff0c;例如拦截属性访问、函数调用、构造函数调用等。
proxy 对…proxy 属性与方法实例 proxy 属性与方法
proxy 是 JavaScript 中的一个内置对象它提供了一种机制来拦截并自定义对象的基本操作。
通过使用 proxy我们可以在对象上定义自定义行为例如拦截属性访问、函数调用、构造函数调用等。
proxy 对象用于创建一个对象的代理是在目标对象之前架设一个拦截外界对该对象的访问都必须先通过这个拦截。通过这种机制就可以对外界的访问进行过滤和改写。
ES6 原生提供 Proxy 构造函数用来生成 Proxy 实例。
var proxy new Proxy(target, handler);target参数表示所要拦截的目标对象handler参数也是一个对象用来定制拦截行为。
const obj {};
const proxynew Proxy(obj,{get:function(target,propKey){return 1}
})console.log(proxy.name) // 1
console.log(proxy.value) // 1在上面代码中Proxy接受两个参数第一个是要代理的目标对象上面的是空对象obj在没有设置Proxy的情况下对proxy的操作就是访问obj。第二个参数是配置对象对每个被代理的操作需要提供一个对应的处理函数这个函数用于拦截对应的操作。
上面代码中配置对象有个get方法用来拦截对目标对象属性的访问请求。get方法中的两个参数分别是目标对象和所要访问的属性。由于设置的是返回1所以访问任何属性都得到1。
下面是 proxy 的一些常用属性和方法
属性
Proxy.revocable(target, handler): 创建一个可撤销的 Proxy 对象。返回一个包含 proxy 和 revoke 函数的对象。通过调用 revoke 函数可以取消代理对象。proxyHandler.getPrototypeOf(target): 拦截对 Object.getPrototypeOf(proxy) 的调用。proxyHandler.setPrototypeOf(target, prototype): 拦截对 Object.setPrototypeOf(proxy, prototype) 的调用。proxyHandler.isExtensible(target): 拦截对 Object.isExtensible(proxy) 的调用。proxyHandler.preventExtensions(target): 拦截对 Object.preventExtensions(proxy) 的调用。proxyHandler.getOwnPropertyDescriptor(target, property): 拦截对 Object.getOwnPropertyDescriptor(proxy, property) 的调用。proxyHandler.defineProperty(target, property, descriptor): 拦截对 Object.defineProperty(proxy, property, descriptor) 或 Object.defineProperties(proxy, properties) 的调用。proxyHandler.has(target, property): 拦截 property in proxy 的操作。proxyHandler.get(target, property, receiver): 拦截属性读取操作。proxyHandler.set(target, property, value, receiver): 拦截属性写入操作。proxyHandler.deleteProperty(target, property): 拦截对 delete proxy.property 的调用。proxyHandler.ownKeys(target): 拦截 Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy) 的调用。proxyHandler.apply(target, thisArg, argumentsList): 拦截函数调用操作。proxyHandler.construct(target, argumentsList, newTarget): 拦截通过 new 关键字构造对象的操作。
以上是 proxy 的一些常用属性和方法可以根据需要选择相应的拦截器进行功能定制。请注意这里的 proxyHandler 是一个包含各种拦截器方法的对象用于定义代理对象的行为。
实例
当使用 proxy 对象时可以根据需要使用各种属性和方法来定制其行为。下面是一些示例说明
1. 拦截属性访问
const target {name: Alice,age: 25
};const proxyHandler {get(target, property, receiver) {console.log(获取属性 ${property});return target[property];}
};const proxy new Proxy(target, proxyHandler);console.log(proxy.name); // 获取属性 name输出 Alice
console.log(proxy.age); // 获取属性 age输出 252. 拦截属性写入
const target {name: Alice,age: 25
};const proxyHandler {set(target, property, value, receiver) {console.log(设置属性 ${property} 值为 ${value});target[property] value;return true;}
};const proxy new Proxy(target, proxyHandler);proxy.age 30; // 设置属性 age 值为 30输出 设置属性 age 值为 30
console.log(proxy.age); // 输出 303. 拦截函数调用
function sum(a, b) {return a b;
}const proxyHandler {apply(target, thisArg, argumentsList) {console.log(调用函数 sum);return target(...argumentsList);}
};const proxy new Proxy(sum, proxyHandler);console.log(proxy(2, 3)); // 调用函数 sum输出 54. 拦截对象的构造函数调用
class Person {constructor(name) {this.name name;}
}const proxyHandler {construct(target, argumentsList, newTarget) {console.log(调用构造函数 Person);return new target(...argumentsList);}
};const ProxyPerson new Proxy(Person, proxyHandler);const alice new ProxyPerson(Alice); // 调用构造函数 Person
console.log(alice.name); // 输出 Alice以上示例只是 proxy 的一小部分功能你可以根据自己的需求使用不同的拦截器方法来自定义对象的行为。
参考文档
https://blog.csdn.net/qq_42880714/article/details/129674746
