js代理

作者: Viewwei | 来源:发表于2020-11-06 21:39 被阅读0次

    代理定义:ES6新增了代理和反射威开发者提供拦截并向操作嵌入额外行为
    1 空代理:所谓的空代理,就是作为一个抽象的目标对象,其他的什么都不做

    const target = {
      "id":"target"
    }
    const handle ={}
    const proxy = new Proxy(target,handle)
    target.id ="foo"
    console.log(target.id) //foo
    console.log(proxy.id) //foo
    

    上述例子就是一个空代理
    2 捕获器
    使用代理的主要目的是捕获器.每个处理程序对象可以包含零个或者多个捕获器,每个捕获器代表一种操作.下面例子为get捕获器

    const target = {
      foo: 'bar'
    }
    const handle ={
      get(){
      return "handle overide"
    }
    const proxy = new Proxy(target,handle)
    }
    

    当通过执行get()操作的时候,就会触发get()捕获器,其中 proxy[property] proxy.property Object.create(property)[property]都会触发get()捕获器
    3 捕获器参数和反射
    不同的捕获器的参数各部相同,比如get捕获器,则接收三个参数,第一个参数为原目标,第二个参数为属性,第三个参数为代理对象

    get(targget,property,receiver){
    }
    

    可以通过全局的Reflect捕获器对象进行重建.几乎所有的捕获器都有相对应的Reflect.比如 Reflect.get Reflect.set....
    如果想创建一个可以捕获所有方法,可以如下写法

    const target ={
      foo:"bar"
    }
    const proxy = new Proxy(target,Relfect)
    

    4 捕获器的不变样式
    捕获器几乎可以改变所有的基本方法,但也不是没有限制.必须遵循捕获不变样式.比如,如果一个对象的属性设置writeable为false,如果通过代理设置值,那么就是报错
    5撤销代理
    能够设置代理,也能够取消代理,取消代理方法是revocable

    const target ={
      foo:'bar'
    }
    const handle ={
      get(){
    return "intercepted"
    }
    
    let { proxy,revoke} = Proxy.revocable(target,handle)
    console.log(target.foo) //bar
    console.l0g(proxy.foo) //intercepted
    revoke()
    console.l0g(proxy.foo) //报错 
    }
    

    3 代理不足
    代理与内置引用类型的实例很好引用,但是不能代理没有内部槽道的类型,比如 Date函数对象
    4 捕获器API
    4.1 get()
    4.2 set()
    4.3 has()
    4.4 defineProperty()
    4.5 getOwnProperDescriptor()
    4.6 deleteProperty()
    4.7 ownKeys() Object.keys()方法受用
    ...

    相关文章

      网友评论

          本文标题:js代理

          本文链接:https://www.haomeiwen.com/subject/nkyivktx.html