反射和代理

反射:

        1.Reflect概念:是属于js内置对象,它可以提供一系列的方法,开发者能调用这些方法,访问js底层的相应功能。

        2.作用:使用Reflect 能够实现函数的调用,对象的取值赋值以及属性是否存在等一系列的底层方法和功能。

        3.整体思想:减少语法,使代码更加纯粹,受到函数式编程思想的影响,减少符号的使用,将所有方法都封装在函数中,让这些函数高度集中在一个对象上面,这个对象就是Reflect

        4.Reflect方法(API)

            4.1  Reflect.set(target,protertyKey,value)

            4.2  Reflect.get(target,protertyKey)

            set和get方法小应用可以看下面的简单示例代码

 <script>
        const obj1 = {
            a : 1,
            b : 2
        }
        // 反射中的API
        // 4.1 set
           Reflect.set(obj1,"c",3)
           console.log(obj1)
        // 4.2 get
           console.log(Reflect.get(obj1,"b"))
 </script>

           4.3  Reflect.apply(target,this,arguments)                函数调用,顺便改变this指向

<script>
         function fun(a,b){
             console.log(this);
             return a + b;
         }
         fun(3,4);
         Reflect.apply(fun,null,[3,4]);
         Reflect.apply(fun,obj1,[3,4]);
</script>

           4.4  Reflect.defineProperty(target,protertyKey)         类似于Object,不同的是Reflect如果配置出现错误的话,会返回false而不是报错。

<script>
     const obj1 = {
            a : 1,
            b : 2
     }
     Reflect.defineProperty(obj1,'a',{
             value : 10,
             configurable : false,
             enumerable : false,
             writable : false
         })
     console.log(obj1)
</script>

             4.5   Reflect.construct(target,arguments)        使用构造函数的方式创建对象

<script>
       function Test(a,b){
            this.a = a;
            this.b = b;
        }
        const t = Reflect.construct(Test,[5,6])
        console.log(t)
</script>

             4.6  Reflect.has(target,protertyKey)        判断一个对象是否拥有一个属性

代理:

代理提供了修改底层实现的方式,没有自己的原型对象

创建方式:

        const    p  =   new   Proxy(target,handler)

        p:就是返回的代理对象

        target: 是指被代理的对象

        handler:是一个普通对象,里面可以配置底层方法

示例代码

    <script>
        const obj = {
            a : 1,
            b : 2
        }
        const proxy = new Proxy(obj,{
            set(target,protertyKey,value){
                Reflect.set(target.protertyKey,value+10)
            },
            get(target,protertyKey){
                return  Reflect.get(target,protertyKey)
            },
            has(){

            },
            deleteProperty(target,protertyKey){
                Reflect.deleteProperty(target,protertyKey)
            },
            defineProperty(){

            }
        })
        console.log(proxy);
        proxy.a = 10;
        console.log(obj);
        console.log(proxy);
    </script>

上一篇:前端/JS/深浅拷贝-引用数据类型/jQuery语法的深浅拷贝/多库并存


下一篇:js 判断两个对象是否相等