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); // Nicholas
console.log(person.name); // Serendipity
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

本文转载于 https://www.cnblogs.com/zaishiyu/p/15421641.html，仅在此做记录便于自己回顾