使用proxy来调用未定义的属性方法

当我们调用一个函数的未定义属性时会报错。那么可以使用一个proxy拦截,并且传入dispatch函数,来使当调用未定义属性时,执行dispatch函数。

原理:

创建一个实例:function createInstance(target:object, dispatch:Functin)
将dispatch绑定到target的一个属性上,最好这个属性名使用Symbol防止重复

const NAME =Symbol('DISPATCH')
Object.assign(target, { [Name]: dispatch } )
return new Proxy(target, handler)

这里的handler是还没有写的,应该至少包括get和apply属性
在调用target的属性时,可以使用get来进行拦截key,判断是否未定义
如果未定义可以设置 handler的属性值 ifundefined = true,这个ifundefined值会在proxy的apply出产生作用。
当我们调用属性方法时,会被handler的apply拦截。apply拦截后判断ifundefined是否为true,如果为true表示:这个属性未定义,调用dispatch函数,即调用target[NAME]。并把args传给apply中。在apply中使用call调用方法

  public apply(target: object, ctx: any, args: any[]) {
    //调用对象的时候调用dispatch方法
    const dispatch = target[NAME]
    return dispatch.call(thisArg, this.keys, args)
  }

这样的话就起到了调用未定义属性时执行指定函数的函数的作用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript 中的 `Proxy` 是一个对象,它可以用来拦截对其他对象的访问,从而实现自定义的行为。 `Proxy` 可以代理一个对象的读写操作,包括: - 读取对象属性,如 `obj.foo` - 设置对象属性,如 `obj.foo = 'bar'` - 调用对象方法,如 `obj.baz()` - 删除对象属性,如 `delete obj.foo` - 等等 通过代理对象,我们可以对对象的访问进行拦截并实现自定义的行为。 比如说,我们可以使用 `Proxy` 对象来实现数据绑定、数据校验、数据缓存、访问控制等功能。 ``` const target = {}; const handler = { get: function(target, prop, receiver) { console.log(`Getting property ${prop}`); return Reflect.get(target, prop, receiver); }, set: function(target, prop, value, receiver) { console.log(`Setting property ${prop} to ${value}`); return Reflect.set(target, prop, value, receiver); } }; const proxy = new Proxy(target, handler); proxy.foo = 'bar'; console.log(proxy.foo); ``` 以上代码创建了一个空的目标对象 `target` 和一个代理处理程序 `handler`。当我们对代理对象进行读写操作时,会触发代理处理程序的 `get` 和 `set` 方法,从而实现自定义的行为。 `Proxy` 对象是 ECMAScript 6 中新增的特性,且不是所有浏览器都支持。请注意,如果你的 ### 回答2: Proxy是JavaScript中的一个内置对象,它允许你在访问一个对象之前拦截并定义自定义的行为。通过Proxy,你可以修改某个对象的默认行为,以自定义其操作。 Proxy的基本用法是,创建一个代理实例,并传入两个参数:目标对象和处理程序对象。目标对象是被代理的对象,处理程序对象是一个包含要拦截方法的对象。处理程序对象中的方法将在对目标对象进行操作时被调用Proxy支持一系列的方法拦截操作,包括get、set、has、deleteProperty、apply等等。例如,通过拦截get方法,可以对目标对象的属性进行自定义操作,比如添加一层访问权限验证。 Proxy还支持trap的代理扩展。这允许在对象未定义某个属性时触发一个函数。通过代理扩展,可以在对象中动态设置属性,并在需要时获取这些属性Proxy的另一个特性是原型代理。在原型代理中,Proxy不仅可以代理对象本身的操作,还可以代理对原型链的操作。这样,可以在访问原型链前后进行拦截和自定义操作。 Proxy还可以用于实现数据绑定和观察。通过在目标对象的get和set方法中添加额外的逻辑,可以实现数据改变时的通知和自动更新。 通过Proxy,我们可以实现更灵活和可扩展的代码,增强对象的行为和能力。然而,由于Proxy是一项较新的JavaScript特性,不是所有的浏览器都支持它。因此,在使用Proxy时需要注意浏览器的兼容性。 ### 回答3: Proxy是ES6引入的新功能,它可以用于对目标对象进行拦截、过滤和修改等操作,使得我们能够更加灵活地控制对象的访问。 Proxy有两个参数:目标对象和handler对象。目标对象可以是任意JavaScript对象,而handler对象用于定义所有可以对目标对象进行的操作。 通过Proxy,我们可以对目标对象的属性进行拦截和修改。handler对象可以包含get和set方法,当我们读取和设置目标对象的属性时,这些方法将会被调用。我们可以在这些方法中加入自己的逻辑,控制读取和设置的操作。 除了get和set方法外,handler对象还可以包含其他方法,例如apply方法可以拦截函数的调用,has方法可以拦截in操作符的判断,deleteProperty方法可以拦截delete操作符的操作,等等。 Proxy还可以用于改变目标对象的行为。比如我们可以在handler对象的get方法中,返回一个新的Proxy对象,从而实现对目标对象的递归访问。 另外,Proxy还提供了一些内置的静态方法,例如Proxy.revocable可以创建一个可撤销的Proxy对象,Proxy.create可以创建一个空的Proxy对象。 总之,Proxy在JavaScript中提供了一种灵活的方式来对对象进行拦截和修改,使得我们能够更加方便地进行一些高级的操作和逻辑控制。然而需要注意的是,Proxy并不是完全替代原始对象的,它只是对原始对象的一种补充和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值