美文网首页
2020-03-13 new Proxy({},handler)

2020-03-13 new Proxy({},handler)

作者: 半眼鱼 | 来源:发表于2020-03-13 14:49 被阅读0次

    什么是代理
    通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。

    语法

    let p = new Proxy(target, handler);
    

    target是你要代理的对象.它可以是JavaScript中的任何合法对象.如: (数组, 对象, 函数等等)
    handler用来拦截、改造 target 的行为。
    -p是一个被代理后的新对象,它拥有target的一切属性和方法.只不过其行为和结果是在handler中自定义的。
    handler它的作用就是用来自定义代理对象的各种可代理操作。它本身一共有13中方法,每种方法都可以代理一种操作。

    handler.getPrototypeOf()
    
    // 在读取代理对象的原型时触发该操作,比如在执行 Object.getPrototypeOf(proxy) 时。
    
    handler.setPrototypeOf()
    
    // 在设置代理对象的原型时触发该操作,比如在执行 Object.setPrototypeOf(proxy, null) 时。
    
    handler.isExtensible()
    
    // 在判断一个代理对象是否是可扩展时触发该操作,比如在执行 Object.isExtensible(proxy) 时。
    
    handler.preventExtensions()
    
    // 在让一个代理对象不可扩展时触发该操作,比如在执行 Object.preventExtensions(proxy) 时。
    
    handler.getOwnPropertyDescriptor()
    
    // 在获取代理对象某个属性的属性描述时触发该操作,比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
    
    handler.defineProperty()
    
    // 在定义代理对象某个属性时的属性描述时触发该操作,比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
    
    handler.has()
    
    // 在判断代理对象是否拥有某个属性时触发该操作,比如在执行 "foo" in proxy 时。
    
    handler.get()
    
    // 在读取代理对象的某个属性时触发该操作,比如在执行 proxy.foo 时。
    
    handler.set()
    
    // 在给代理对象的某个属性赋值时触发该操作,比如在执行 proxy.foo = 1 时。
    
    handler.deleteProperty()
    
    // 在删除代理对象的某个属性时触发该操作,比如在执行 delete proxy.foo 时。
    
    handler.ownKeys()
    
    // 在获取代理对象的所有属性键时触发该操作,比如在执行 Object.getOwnPropertyNames(proxy) 时。
    
    handler.apply()
    
    // 在调用一个目标对象为函数的代理对象时触发该操作,比如在执行 proxy() 时。
    
    handler.construct()
    
    // 在给一个目标对象为构造函数的代理对象构造实例时触发该操作,比如在执行new proxy() 时。
    

    作用
    拦截和监视外部对对象的访问
    降低函数或类的复杂度
    在复杂操作前对操作进行校验或对所需资源进行管理
    一个例子

    let obj = {
      a: 1,
      b: 2,
    }
    
    const p = new Proxy(obj, {
      get(target, key, value) {
        if (key === 'c') {
          return '我是自定义的一个结果';
        } else {
          return target[key];
        }
      },
    
      set(target, key, value) {
        if (value === 4) {
          target[key] = '我是自定义的一个结果';
        } else {
          target[key] = value;
        }
      }
    })
    
    console.log(obj.a) // 1
    console.log(obj.c) // undefined
    console.log(p.a) // 1
    console.log(p.c) // 我是自定义的一个结果
    
    obj.name = '李白';
    console.log(obj.name); // 李白
    obj.age = 4;
    console.log(obj.age); // 4
    
    p.name = '李白';
    console.log(p.name); // 李白
    p.age = 4;
    console.log(p.age); // 我是自定义的一个结果
    

    相关文章

      网友评论

          本文标题:2020-03-13 new Proxy({},handler)

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