js--代理和反射初识

前言

　　我们在ES6之前可以通过Object.defineProperty 来实现已有属性的监听，但是这种方式有一个缺点，我们只能通过设置指定属性来监听，我们没法监听整个对象的变化。ES6提供了一种代理模式来扩展对象操作的行为，我们可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用，因此，在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制，这就达到了监听拦截对象操作的控制。本文来初步认识一下什么是代理个反射。

正文

　　1、什么是代理

　　代理是目标对象的抽象，它可以用作目标对象的替身，但又完全独立于目标对象。目标对象既可以直接被操作，也可以通过代理来操作。但直接操作会绕过代理施予的行为。

　　2 、代理、捕获器与反射API

　　（1）创建一个空代理

　　当你使用proxy构造器来创建一个代理时，需要传递两个参数：目标对象以及一个处理器，后者是定义了一个或多个陷阱函数的对象（也叫捕获器），如果未提供陷阱函数，代理会对所有操作采取默认行为。为了创建一个仅进行传递的代理，你需要使用不包含任何陷阱函数的处理器。

        var person = {};
        var perProxy = new Proxy(person, {});
        perProxy.name = "Serendipity";
        console.log(person.name); // "Serendipity"
        console.log(perProxy.name); // "Serendipity"
        person.name = "SerendipityProxy";
        console.log(perProxy.name); // "SerendipityProxy"
        console.log(person.name); // "SerendipityProxy"
        // hasOwnProperty()方法在两个地方
        console.log(person.hasOwnProperty('name')); // true
        console.log(perProxy.hasOwnProperty('name')); // true
        // 因此不能使用 instanceof 操作符
        console.log(person instanceof Proxy); // TypeError: Function has non-object prototype 'undefined' in instanceof check
        console.log(perProxy instanceof Proxy); // TypeError: Function has non-object prototype 'undefined' in instanceof check

        // 严格相等可以用来区分代理和目标
        console.log(person === perProxy); // false

　　上例中 perProxy 对象将所有操作直接传递给 person 对象，当 perProxy.name 属性被赋值为字符串“Serendipity”的时候，person.name属性也同时被创建，代理对象 perProxy 自身其实并没有存储该属性，它只是简单将值传递给 person 对象。这就意味着在 person 上设置一个新的属性，会在 perProxy 上反映出相同的变化。

　　（2）创建一个含捕获器的代理

前面讲到的陷阱函数又叫捕获器，是使用代理的主要目的，捕获器就是在处理程序对象中定义的基本操作的拦截器，每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。

　　这里暂且介绍一下含get() 捕获器的代理， proxy[property] 、 proxy.property 或 Object.create(proxy)[property] 等操作都会触发基本的 get() 操作以获取属性。因此所有这些操作只要发生在代理对象上，就会触发 get() 捕获器。注意，只有在代理对象上执行这些操作才会触发捕获器。在目标对象上执行这些操作仍然会产生正常的行为。

        const person = {
            name: 'Serendipity'
        };
        const handler = {
            // 捕获器在处理程序对象中以方法名为键
            get() {
                return 'SerendipityProxy';
            }
        };
        const perProxy = new Proxy(person, handler);
        console.log(person.name); // Serendipity
        console.log(perProxy.name); // SerendipityProxy
        console.log(person['name']); // Serendipity
        console.log(perProxy['name']); // SerendipityProxy
        console.log(Object.create(person)['name']); // Serendipity
        console.log(Object.create(perProxy)['name']); // SerendipityProxy

　　（3）捕获器的参数和反射 API

　　所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。比如， get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数。

        const person = {
            name: 'Serendipity'
        };
        const handler = {
            get(trapTarget, property, receiver) {
                console.log(trapTarget === person);
                console.log(property);
                console.log(receiver === perProxy);
                return trapTarget[property];
            }
        };
        const perProxy = new Proxy(person, handler);
        console.log(perProxy.name); //true name true  Serendipity
        console.log(person.name); // Serendipity

　　注意：所有捕获器都可以基于自己的参数重建原始操作，但并非所有捕获器行为都像 get() 那么简单，实际上，开发者并不需要手动重建原始行为，而是可以通过调用全局 Reflect 对象上（封装了原始行为）的同名方法来轻松重建。

　　处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API 方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。因此，使用反射 API 也可以像下面这样定义出空代理对象：

        const person = {
            name: 'Serendipity'
        };
        const handler = {
            get() {
                console.log(...arguments);
                return Reflect.get(...arguments);// 也可以get: Reflect.get
            }
        };
        const perProxy = new Proxy(person, handler);
        console.log(perProxy.name); // {name: 'Serendipity'}  "name"   Proxy:{name: 'Serendipity'} Serendipity
        console.log(person.name); // Serendipity

　　甚至你可以通过 new Proxy(person, Reflect)创建一个捕获所有方法的代理

　　反射 API 为开发者准备好了样板代码，在此基础上开发者可以用最少的代码修改捕获的方法。比如，下面的代码在某个属性被访问时，会对返回的值进行一番修饰：

        const person = {
            name: 'Serendipity',
            age: 18
        };
        const handler = {
            get(trapTarget, property, receiver) {
                let decoration = '';
                if (property === 'name') {
                    decoration = '!!!';
                }
                return Reflect.get(...arguments) + decoration;
            }
        };
        const perProxy = new Proxy(person, handler);
        console.log(perProxy.name); // Serendipity!!!
        console.log(person.name); // Serendipity
        console.log(perProxy.age); // 18
        console.log(person.age); // 18

　　（4）捕获器的限制

　　每个捕获器方法都有不同的参数，但是对于捕获器的具体方法也有一定限制，比如：如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出 TypeError。

        const person = {};
        Object.defineProperty(person, 'name', {
            configurable: false,
            writable: false,
            value: 'Serendipity'
        });
        const handler = {
            get() {
                return 'Nicholas';
            }
        };
        const perProxy = new Proxy(person, handler);
        console.log(perProxy.name);// TypeError

　　（5）代理的创建与撤销

　　前面通过new Proxy() 调用构造函数的方法会将代理对象和目标对象永久关联在一起，若我们想在创建了代理，使用之后将代理撤销，就需要通过 Proxy暴露的 revocable() 方法的proxy 属性来创建，使用 revoke() 方法来撤销。重要撤销的代理之后再次使用会报错 TypeError。

        const person = {
            name: "Serendipity"
        }
        const handler = {
            get() {
                return 'Nicholas';
            }
        };
        const obj = Proxy.revocable(person, handler);
        const perProxy = obj.proxy
        console.log(perProxy.name); // intercepted
        console.log(person.name); // bar
        obj.revoke();
        console.log(perProxy.name); // TypeError：Cannot perform 'get' on a proxy that has been revoked

　　（6）代理来代理另一个代理

　　同样也可以通过代理来代理另一个代理，进行代理的嵌套。

        const target = {
            foo: 'bar'
        };
        const firstProxy = new Proxy(target, {
            get() {
                console.log('first proxy');
                return Reflect.get(...arguments);
            }
        });
        const secondProxy = new Proxy(firstProxy, {
            get() {
                console.log('second proxy');
                return Reflect.get(...arguments);
            }
        });
        console.log(secondProxy.foo);
        // second proxy
        // first proxy
        // bar

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。