JavaScript中Proxy对象如何详细解析？

本文共计1107个文字，预计阅读时间需要5分钟。

目录

一、Proxy 是什么？

二、如何使用 Proxy？

1.使用 Proxy 的简单实例

2.目标对象被正确修改

3.使用 set handler 做数据验证

4.扩展构造函数

总结

一、Proxy 是什么？

Proxy 对象用于拦截和定义基本操作，如属性查找、赋值、枚举、函数调用等。它允许我们定义对这些操作的行为。

二、如何使用 Proxy？

1.使用 Proxy 的简单实例

javascriptconst proxy=new Proxy(target, handler);其中，`target` 是要包装的目标对象，`handler` 是一个配置对象，其属性定义了各种操作的处理方式。

2. 目标对象被正确修改javascriptconst handler={ set(target, property, value) { target[property]=value; return true; }};const target={};const proxy=new Proxy(target, handler);proxy.name='张三';console.log(target.name); // 输出: 张三

3. 使用 set handler 做数据验证javascriptconst handler={ set(target, property, value) { if (typeof value !=='number') { throw new TypeError('只能设置数字'); } target[property]=value; return true; }};const target={};const proxy=new Proxy(target, handler);proxy.age=20; // 正常赋值proxy.age='二十'; // 抛出错误

4. 扩展构造函数javascriptconst handler={ construct(target, args) { console.log('构造函数被调用', args); return new target(...args); }};const Target=function(name) { this.name=name;};const proxy=new Proxy(Target, handler);const instance=new proxy('张三');console.log(instance.name); // 输出: 张三

总结

一、Proxy 是什么？

Proxy 对象用于拦截和定义基本操作，如属性查找、赋值、枚举、函数调用等。它允许我们定义对这些操作的行为。Proxy 对象用于拦截和定义基本操作，如属性查找、赋值、枚举、函数调用等。它允许我们定义对这些操作的行为。

目录

• 一、Proxy 是什么？
• 二、怎么用？
• 1、使用 Proxy 的简单实例
• 2、目标对象被正确修改
• 3、使用 set handler 做数据验证
• 4、扩展构造函数
• 总结

一、Proxy 是什么？

Proxy 对象用于拦截并修改目标对象的指定操作。

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

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

二、怎么用？

1、使用 Proxy 的简单实例

访问不存在的属性，设置默认值返回而不返回 undefined

// 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, undefined console.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 做数据验证

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 value obj[prop] = value; // 表示成功 return true; } }; let person = new Proxy({}, validator); person.age = 100; console.log(person.age); // 100 person.age = 'young'; // 抛出异常: Uncaught TypeError: The age is not an integer person.age = 300; // 抛出异常: Uncaught RangeError: The age seems invalid

4、扩展构造函数

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 = 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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!