JavaScript的Proxy对象详解 JavaScript的Proxy对象详解

一、Proxy 是什么？
二、怎么用？

1、使用 Proxy 的简单实例
2、目标对象被正确修改
3、使用 set handler 做数据验证
4、扩展构造函数

总结

一、Proxy 是什么？ Proxy 对象用于拦截并修改目标对象的指定操作。

// 语法const p = new Proxy(target, handler)

target ：目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler ：以函数作为属性的对象，实现拦截和自定义操作。

二、怎么用？
1、使用 Proxy 的简单实例
访问不存在的属性，设置默认值返回而不返回 undefined ，get handler 有其具体语法规则，看这里!

// 1、找到合适的 handler 并编写代码const handler = {get: function(obj, prop) {return prop in obj ? obj[prop] : 37; }}; // 2、新建 Proxy 对象const p = new Proxy({}, handler); // 3、执行操作p.a = 1; p.b = undefined; // 4、查看结果console.log(p.a, p.b); // 1, undefinedconsole.log('c' in p, p.c); // false, 37

2、目标对象被正确修改

let target = {}; let p = new Proxy(target, {}); p.a = 37; // 操作转发到目标console.log(target.a); // 37. 操作已经被正确地转发

3、使用 set handler 做数据验证
set handler 有其具体的语法规则，看这里！

let validator = {set: function(obj, prop, value) {if (prop === 'age') {if (!Number.isInteger(value)) {throw new TypeError('The age is not an integer'); }if (value > 200) {throw new RangeError('The age seems invalid'); }}// The default behavior to store the valueobj[prop] = value; // 表示成功return true; }}; let person = new Proxy({}, validator); person.age = 100; console.log(person.age); // 100person.age = 'young'; // 抛出异常: Uncaught TypeError: The age is not an integerperson.age = 300; // 抛出异常: Uncaught RangeError: The age seems invalid

4、扩展构造函数
construct handler 的具体语法规则，看这里！

function extend(sup, base) {var descriptor = Object.getOwnPropertyDescriptor(base.prototype, "constructor"); base.prototype = Object.create(sup.prototype); var handler = {construct: function(target, args) {var obj = Object.create(base.prototype); this.apply(target, obj, args); return obj; },apply: function(target, that, args) {sup.apply(that, args); base.apply(that, args); }}; var proxy = new Proxy(base, handler); descriptor.value = https://www.it610.com/article/proxy; Object.defineProperty(base.prototype,"constructor", descriptor); return proxy; }var Person = function (name) {this.name = name}; var Boy = extend(Person, function (name, age) {this.age = age; }); Boy.prototype.sex = "M"; var Peter = new Boy("Peter", 13); console.log(Peter.sex); // "M"console.log(Peter.name); // "Peter"console.log(Peter.age); // 13

总结
【JavaScript的Proxy对象详解】本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!