• ES6 Reflect&Proxy


    Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。

    Proxy 可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。

    Reflect 可以用于获取目标对象的行为,它与 Object 类似,但是更易读,为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。

    Proxy基本用法

     let pro = new Proxy(target,handler);

    其中 new Proxy相当于创建了一个Proxy实例,target为所要拦截的目标对象,handler也是一个对象,里面定义的是对拦截对象所要进行的拦截方法。

    实例一:

    let target = {
        name:"小明",
        age: 15
    }
    
    let handler = {
        get(target,name){
            console.log('getting:'+name)
            return target[name]
        }
    }
    
    let pro = new Proxy(target,handler);
    console.log(pro.name);

    创建的target对象为所要拦截的对象,handler对象为拦截对象后执行的操作,这里get方法为读取操作,即用户想要读取pro中的属性时执行的拦截操作。最后创建一个Proxy实例,因为我设定的读取拦截操作为输出一个“getting:”+属性字符串,所以当我想读取pro中的属性时,拦截输出一个“getting:”+属性字符串。

    实例二:

    let target = {
        name:"小明",
        age: 15
    }
    
    let handler = {
    } let pro
    = new Proxy(target,handler); console.log(pro.name); console.log(pro.age)

    拦截操作对象handler为空,未对拦截对象设定拦截方法,该情况下pro直接指向原对象target,访问pro等同于访问target,所以结果为target中的结果。

     实例三:

    let target = {
        name:"小明",
        age: 15
    }
    
    let handler = {
        get(target,name){
            console.log('getting:'+name)
            return target[name]
        }
    }
    
    let pro = new Proxy(target,handler);
    let obj = Object.create(pro);
    
    console.log(obj.name)

    上述实例将pro作为obj的原型对象使用,虽然obj本身没有name这个属性,但是根据原型链,会在pro上读取到name属性,之后会执行相对应的拦截操作。

    Proxy常用的拦截方法

    1、get(target, propKey, receive)方法,用于拦截某个读取属性的操作,第一个参数为目标对象,第二个参数为属性名称,第三个属性为操作所针对的对象(可选参数)。

    let target = {
    
    name:"小明",
    
    age: 15
    
    }
    
     
    
    let handler = {
    
    get(target, propKey, receive){
    
    if(propKeyin target){
    
    console.log("success");
    
    }else{
    
    console.log("error")
    
    }
    
    //return Object.defineProperty(target, propKey, receive);
    
    return Reflect.get(target, propKey, receive);
    
    }
    
    }
    
     
    
    let pro = new Proxy(target,handler);
    
    console.log(pro.name)
    
    console.log(pro.sex)

    2、set(target, propKey, value, receiver),用于拦截某个属性的赋值操作,第一个参数为目标对象,第二个参数为属性名,第三个参数为属性值,第四个参数为操作行为所针对的对象(可选参数)。

    let target = {
    
    name:"小明",
    
    age: 15
    
    }
    
     
    
    let handler = {
    
    get(target, propKey, receive){
    
    if(propKey in target){
    
    console.log("get success");
    
    }else{
    
    console.log("get error")
    
    }
    
    //return Object.defineProperty(target, propKey, receive);
    
    return Reflect.get(target, propKey, receive);
    
    },
    
    set(target, propKey, value, receiver){
    
    if(propKey=='age'){
    
    if(!Number.isInteger(value)){
    
    throw new TypeError('The age is not an integer');
    
    }else{
    
    console.log("set success");
    
    }
    
    }else{
    
    console.log("set success");
    
    }
    
    return Reflect.set(target, propKey, value, receiver);
    
    }
    
    }
    
     
    
    let pro = new Proxy(target,handler);
    
    pro.age=30;
    
    pro.name='呵呵';
    
    console.log(pro.age)
    
    console.log(pro.name)

    3、has(target, propKey)用来拦截对象是否具有某个属性值的操作,第一个参数为目标对象,第二个参数为属性名

    let target = {
    name:"小明",
    age: 15
    }
    
    let handler = {
    
    has(target,proKey){
    
    console.log('handle has');
    
    return proKey in target;
    
    }
    
    } 
    
    let pro = new Proxy(target,handler);
    
    console.log('name' in pro);
    console.log('sex' in pro);

    Reflect的静态方法

    Reflect.apply(target, thisArg, args)

    Reflect.construct(target, args)

    Reflect.get(target, name, receiver)

    Reflect.set(target, name, value, receiver)

    Reflect.defineProperty(target, name, desc)

    Reflect.deleteProperty(target, name)

    Reflect.has(target, name)

    Reflect.ownKeys(target)

    Reflect.isExtensible(target)

    Reflect.preventExtensions(target)

    Reflect.getOwnPropertyDescriptor(target, name)

    Reflect.getPrototypeOf(target)

    Reflect.setPrototypeOf(target, prototype)

    Reflect对象的静态方法和Proxy对象的静态方法一一对应

  • 相关阅读:
    YTU 2625: B 构造函数和析构函数
    YTU 2623: B 抽象类-形状
    YTU 2622: B 虚拟继承(虚基类)-沙发床(改错题)
    YTU 2621: B 继承 圆到圆柱体
    YTU 2620: B 链表操作
    YTU 2619: B 友元类-计算两点间距离
    刷题总结——切蛋糕(ssoj)
    刷题总结——拦截导弹(ssoj)
    算法复习——费用流模板(poj2135)
    算法复习——网络流模板(ssoj)
  • 原文地址:https://www.cnblogs.com/zsh-blogs/p/12963946.html
Copyright © 2020-2023  润新知