详解JavaScript的Proxy对象

本文介绍了JavaScript的Proxy对象,用于拦截和修改目标对象的操作。详细讨论了如何创建和使用Proxy,包括通过get和set handler设置默认值和进行数据验证,以及在构造函数中的应用。
摘要由CSDN通过智能技术生成
一、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, undefined
console.
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 2.x 中,使用的是 Object.defineProperty() 进行数据劫持,但是这种方法有一些缺点,比如无法监听数组的变化,还需要递归遍历对象属性进行绑定。 在 Vue 3.x 中,采用了 Proxy 对象进行数据劫持。Proxy 对象可以拦截对象的读取、赋值、删除等操作,比 Object.defineProperty() 更加强大。 下面我们来看一下 Proxy 对象在 Vue 3.x 中的应用。 首先,我们创建一个 reactive 函数,它接收一个普通对象,返回一个响应式的对象。 ```javascript function reactive(obj) { return new Proxy(obj, { get(target, key) { console.log('get', key) return Reflect.get(target, key) }, set(target, key, value) { console.log('set', key, value) return Reflect.set(target, key, value) }, deleteProperty(target, key) { console.log('delete', key) return Reflect.deleteProperty(target, key) } }) } ``` 上面的代码中,我们创建了一个 Proxy 对象,其中 get、set、deleteProperty 方法分别对应了读取、赋值、删除操作。在这些方法中,我们可以打印出操作的类型以及操作的属性名,方便我们调试。 接下来,我们创建一个普通对象,并使用 reactive 函数将其转为响应式对象。 ```javascript const obj = reactive({ name: 'Tom', age: 18, hobbies: ['reading', 'music'] }) ``` 现在,我们可以通过访问 obj 的属性来触发 get、set、deleteProperty 方法。 ```javascript console.log(obj.name) // 输出 get name, Tom obj.age = 20 // 输出 set age 20 delete obj.hobbies // 输出 delete hobbies ``` 可以看到,我们成功地拦截了对象的读取、赋值、删除操作,并打印出了相关信息。 除了上述常用的方法外,Proxy 还有许多其他的拦截方法,如 has、apply、construct 等,可以满足更多的需求。 总的来说,Vue 3.x 中采用 Proxy 对象进行数据劫持,使得响应式系统更加强大、灵活,提高了开发效率,是一个非常不错的改进。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值