Proxy-Reflect

监听对象的操作

使用存储属性描述符

<script>
        const obj = {
     
            name:'Li',
            age:18,
            gender:'man'
        }
        Object.keys(obj).forEach(key => {
     
            Object.defineProperty(obj, key, {
     
                get() {
     
                    console.log(`obj中的${
       key}的值被获取`);
                },
                set() {
     
                    console.log(`obj中的${
       key}的值被设置`);
                }
            })
        })

        console.log(obj.name);
        obj.age = 20
    </script>

缺点:
与设计初衷不符
难以进行增加和删除操作的监听

proxy可以监听13种操作

proxy是一个类
实例是代理对象

使用proxy实现刚才的操作

 <script>
        const obj = {
     
            name:'Li',
            age:18,
            gender:'man'
        }
       
        const proxyObj =
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScriptProxy 和 Reflect 是 ECMAScript 6 引入的新特性。它们可以一起使用来创建代理对象,以拦截对对象的访问和操作,从而提供更灵活的控制和定制行为。 Proxy 是一个 JavaScript 内置对象,它允许你拦截并定义基本操作的自定义行为,例如属性访问、函数调用、对象构造等。Reflect 是一个 JavaScript 内置对象,它提供了一组方法,用于在 Proxy 对象上执行默认行为。 使用 Proxy 和 Reflect,开发人员可以创建具有自定义行为的对象。例如,您可以使用 Proxy 拦截对对象属性的访问,并在 Reflect 上调用默认行为来获取或设置该属性的值。这种灵活性使得开发人员能够更好地控制和自定义应用程序的行为。 下面是一个简单的例子,展示了如何使用 Proxy 和 Reflect 创建一个代理对象: ```javascript const obj = { name: 'John', age: 30 }; const handler = { get(target, prop, receiver) { console.log(`Getting ${prop} property`); return Reflect.get(target, prop, receiver); }, set(target, prop, value, receiver) { console.log(`Setting ${prop} property to ${value}`); return Reflect.set(target, prop, value, receiver); } }; const proxyObj = new Proxy(obj, handler); console.log(proxyObj.name); proxyObj.age = 35; ``` 在上面的例子中,我们创建了一个名为 obj 的对象,并将其传递给一个名为 handler 的代理处理程序。处理程序定义了对 get 和 set 操作的拦截,其中在每个操作中都使用 Reflect 调用默认行为。然后,我们创建了一个名为 proxyObj 的代理对象,并将其设置为 obj 的代理。最后,我们访问了 proxyObj 的属性,并将其设置为一个新值。 当我们运行上面的代码时,我们会看到以下输出: ``` Getting name property John Setting age property to 35 ``` 从输出中可以看出,代理处理程序成功地拦截了对代理对象的访问和操作,并使用 Reflect 调用了默认行为。这样,我们就可以更好地控制和自定义我们的应用程序行为。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值