代理与反射

<script>
    const target = {
        id: 'target'
    };
    const handler = {};
    const proxy = new Proxy(target, handler);

    // id属性会访问同一个值
    console.log(target.id);   // target
    console.log(proxy.id);    // target
    // 给目标属性赋值会反映在两个对象上
    // 因为两个对象访问的是同一个值
    target.id = 'foo';
    console.log(target.id); // foo
    console.log(proxy.id);   // foo
    // 给代理属性赋值会反映在两个对象上
    // 因为这个赋值会转移到目标对象
    proxy.id = 'bar';
    console.log(target.id); // bar
    console.log(proxy.id);   // bar
    // hasOwnProperty()方法在两个地方
    // 都会应用到目标对象
    console.log(target.hasOwnProperty('id')); // true
    console.log(proxy.hasOwnProperty('id'));   // true


    // Proxy.prototype是undefined
    // 因此不能使用instanceof操作符
    console.log(target instanceof Proxy); // TypeError: Function has non-object prototype
    // 'undefined' in instanceof check
    console.log(proxy instanceof Proxy);  // TypeError: Function has non-object prototype
    // 'undefined' in instanceof check
    // 严格相等可以用来区分代理和目标
    console.log(target === proxy); // false
</script>

定义捕获器

使用代理的主要目的是定义捕获器；

捕获器：处理程序对象中定义的“基本操作的拦截器”；
每个程序可以包括0个或多个；
每个捕获器对应一种基本操作，可以直接或间接在代理对象上调用；
每次在代理对象上调用这些基本操作的时候，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。

 const target = {
        foo: 'bar'
    };
    const handler = {
        // 捕获器在处理程序对象中以方法名为键
        get() {
            return 'handler override';
        }
    };
    const proxy = new Proxy(target, handler);
    console.log(target.foo);                         // bar
    console.log(proxy.foo);                          // handler override
    console.log(target['foo']);                     // bar
    console.log(proxy['foo']);                       // handler override
    console.log(Object.create(target)['foo']);   // bar
    console.log(Object.create(proxy)['foo']);    // handler o

直接操作对象，会绕过代理器

捕获器参数和反射API

所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。

trapTarget：被捕获的目标对象
property：属性
receiver：代理程序对象

    const target = {
        foo: 'bar'
    };
    const handler = {
        // 目标对象 要查询的属性 代理对象
        get(trapTarget, property, receiver) {
            console.log(trapTarget === target);    // true
            console.log(property);    // foo
            console.log(receiver === proxy);    // true
            return trapTarget[property];
        }
    };
    const proxy = new Proxy(target, handler);
    console.log(proxy.foo);   // bar
    console.log(target.foo); // bar

开发者并不需要手动重建原始行为，而是可以通过调用全局Reflect对象上（封装了原始行为）的同名方法来轻松重建。

Reflect ❤❤❤❤❤❤

处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API方法。这些方法与捕获器拦截的方法具有相同的名称和参数列表，而且也具有与被拦截方法相同的行为。

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

   const target = {
        foo: 'bar',
        baz: 'qux'
    };
    const handler = {
        get(trapTarget, property, receiver) {
            let decoration = '';
            if (property === 'foo') {
                decoration = '!!!';
            }
            return Reflect.get(...arguments) + decoration;
        }
    };
    const proxy = new Proxy(target, handler);
    console.log(proxy.foo);    // bar!!!
    console.log(target.foo);   // bar
    console.log(proxy.baz);    // qux
    console.log(target.baz);   // qux

捕获器不变式

捕获器几乎可以改变所有基本方法的行为，但也不是没有限制。

通常都会防止捕获器定义出现过于反常的行为。

每个捕获的方法都知道目标对象上下文、捕获函数的参数列表，而捕获处理程序的行为必须遵循“捕获器不变式”（trap invariant）。

    const target = {};
    Object.defineProperty(target, 'foo', {
        configurable: false,//是否可配置
        writable: false, //是否可写
        value: 'bar' //key
    });
    const handler = {
        get() {
            return 'qux';
        }
    };
    const proxy = new Proxy(target, handler);
    console.log(proxy.foo);
    // TypeError

可撤销代理

有时可能需要中断代理对象与目标对象之间的联系。不然这种联系会在代理对象的生命周期内一直持续存在。

Proxy的静态方法revocable()，支持创建可撤销的代理对象（工厂方法）。撤销代理的操作是不可逆的。撤销代理之后再调用代理会抛出TypeError。

撤销函数和代理对象是在实例化时同时生成的：

    const target = {
        foo: 'bar'
    };
    const handler = {
        get() {
            return 'intercepted';
        }
    };
    const { proxy, revoke } = Proxy.revocable(target, handler);
    console.log(proxy.foo);    // intercepted
    console.log(target.foo);   // bar
    revoke();
    console.log(proxy.foo);    // TypeError

实用的反射API（底层操作）

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法，是 ES6 为了操作对象而提供的新 API。
Reflect不是一个函数对象，因此它是不可构造的。
Reflect的所有属性和方法都是静态的。

某些情况下应该优先使用反射API。

// 对一个函数进行调用操作，同时可以传入一个数组作为调用参数。
Reflect.apply(target, thisArg, args)	
// 对构造函数进行 new 操作，相当于执行 new target(...args)。
Reflect.construct(target, args)
// 获取对象身上某个属性的值，类似于 target[name]。如果没有该属性，则返回undefined。
Reflect.get(target, name, receiver)
// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。
Reflect.set(target, name, value, receiver)
// Reflect.defineProperty方法基本等同于Object.defineProperty，直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，不同的是，Object.defineProperty返回此对象。而Reflect.defineProperty会返回布尔值.
Reflect.defineProperty(target, name, desc)
// 作为函数的delete操作符，相当于执行 delete target[name]。
Reflect.deleteProperty(target, name)
// 判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。
Reflect.has(target, name)
// 返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable影响, Object.keys返回所有可枚举属性的字符串数组).
Reflect.ownKeys(target)
// 判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）,类似于 Object.isExtensible()。返回表示给定对象是否可扩展的一个Boolean 。（Object.seal 或 Object.freeze 方法都可以标记一个对象为不可扩展。）
Reflect.isExtensible(target)
// 让一个对象变的不可扩展，也就是永远不能再添加新的属性。
Reflect.preventExtensions(target)
// 如果对象中存在该属性，如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。类似于 Object.getOwnPropertyDescriptor()。
Reflect.getOwnPropertyDescriptor(target, name)
// 返回指定对象的原型.类似于 Object.getOwnPropertyDescriptor()。
Reflect.getPrototypeOf(target)
// 设置对象原型的函数. 返回一个 Boolean， 如果更新成功，则返回true。如果 target 不是 Object ，或 prototype 既不是对象也不是 null，抛出一个 TypeError 异常。
Reflect.setPrototypeOf(target, prototype)

Reflect API与Object API

反射API并不限于捕获处理程序；大多数反射API方法在Object类型上有对应的方法。通常，Object上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。
状态标记

很多反射方法返回称作”状态标记“的布尔值，表示意图执行的操作是否成功。以下反射方法都会提供状态标记：
- Reflect.defineProperty()
- Reflect.preventExtensions()
- Reflect.setPrototypeOf()
- Reflect.set()
- Reflect.deleteProperty()
用一等函数替代操作符以下反射方法提供只有通过操作符才能完成的操作：
- Reflect.get() 对象属性访问
- Reflect.set() 对象属性赋值
- Reflect.has() in操作符或者with()
- Reflect.deleteProperty() delete操作符
- Reflect.construct() new操作符
安全地应用函数

Reflect.apply(myFunc, thisVal, argumentsList)

替代Function.prototype.apply.call(myFunc, thisVal, argumentsList)。

避免被调用的函数可能定义了自己的apply属性（虽然可能性极小）。

使用反射API，可以重构那些：返回修改后对象、抛出错误的方法。

初始代码：

    const o = {};
    try {
        Object.defineProperty(o, 'foo', 'bar');
        console.log('success');
    } catch (e) {
        console.log(e);
        console.log('failure');
    }

反射API重构之后：

    const o = {};
    if (Reflect.defineProperty(o, 'foo', { value: 'bar' })) {
        console.log('success');
        console.log(o.foo);
    } else {
        console.log('failure');
    }

代理另一个代理

可以在一个目标对象之上构建多层拦截网

    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

代理的不足

代理的this

    const target = {
        show() {
            return this === proxy
        }
    }

    const proxy = new Proxy(target, {})

    console.log(target.show());	// false
    console.log(proxy.show());	// true

代理与内部槽位

代理与内置引用类型的实例，一般可以协同，但是有一些内置类型可能会依赖代理无法控制的机制。


    const target = new Date();
    const proxy = new Proxy(target, {});
    console.log(proxy instanceof Date);   // true
    proxy.getDate();   // TypeError: 'this' is not a Date object

比如说Date：Date类型方法的执行，依赖this值上的内部槽位[[NumberDate]]，但是代理对象并不存在这个槽位，而且内部槽位的值不能通过普通的get()和set()操作。所以当代理拦截后，本应转发给目标对象的方法，会抛出TypeError

代理捕获器与反射方法

get() 捕获器获取属性值

get()捕获器在获取属性值的操作中被调用。

返回值：没有返回值限制
拦截的操作

proxy.property
proxy[property]
Object.create(proxy)[property]
Reflect.get(proxy, property, receiver)

捕获器处理程序参数

target：目标对象
property：引用的目标对象上的字符串键属性。
receiver：代理对象或继承代理对象的对象

捕获器不变式

如果target.property不可写且不可配置，则处理程序返回的值必须与target.property匹配。
如果target.property不可配置且[[Get]]特性为undefined，处理程序的返回值也必须是undefined。


    const myTarget = {};
    const proxy = new Proxy(myTarget, {
        get(target, property, receiver) {
            console.log('get()');
            return Reflect.get(...arguments)
        }
    });
    proxy.foo;
    // get()

set()捕获器设置属性值

set()捕获器设置属性值的操作中被调用。

返回值:true false【严格模式下抛出错误】
拦截的操作

proxy.property = value
proxy[property] = value
Object.create(proxy)[property] = value
Reflect.set(proxy, property, value, receiver)

捕获器处理程序参数

target：目标对象。
property：引用的目标对象上的字符串键属性。
value：要赋给属性的值。
receiver：接收最初赋值的对象。

捕获器不定式

如果target.property不可写且不可配置，则不能修改目标属性的值。
如果target.property不可配置且[[Set]]特性为undefined，则不能修改目标属性的值。
在严格模式下，处理程序中返回false会抛出TypeError

    const myTarget = {};
    const proxy = new Proxy(myTarget, {
        set(target, property, value, receiver) {
            console.log('set()');
            return Reflect.set(...arguments)
        }
    });
    proxy.foo = 'bar';
    // set()

has()捕获器in操作符

has()捕获器会在in操作符中被调用。

返回值【表示是否存在】 true false
拦截的操作

property in proxy
property in Object.create(proxy)
with(proxy) {(property);}
Reflect.has(proxy, property)

捕获器处理程序参数

target：目标对象。
property：引用的目标对象上的字符串键属性。

捕获器不变式

如果target.property存在且不可配置，则处理程序必须返回true。
如果target.property存在且目标对象不可扩展，则处理程序必须返回true。

    const myTarget = {};
    const proxy = new Proxy(myTarget, {
        has(target, property) {
            console.log('has()');
            return Reflect.has(...arguments)
        }
    });
    let a = 'foo' in proxy;
    console.log(a);
    // has()

defineProperty()会在Object.defineProperty()中被调用。

返回值【表示是否定义成功】 true false
拦截的操作

Object.defineProperty(proxy, property, descriptor)
Reflect.defineProperty(proxy, property, descriptor)

捕获器处理程序参数

target：目标对象。
property：引用的目标对象上的字符串键属性。
descriptor：包含可选的enumerable、 configurable、 writable、 value、 get和set定义的对象

捕获器不变式

如果目标对象不可扩展，则无法定义属性
如果目标对象有一个可配置的属性，则不能添加同名的不可配置属性
如果目标对象有一个不可配置的属性，则不能添加同名的可配置属性

    const myTarget = {};
    const proxy = new Proxy(myTarget, {
        defineProperty(target, property, descriptor) {
            console.log('defineProperty()');
            return Reflect.defineProperty(...arguments)
        }
    });
    Object.defineProperty(proxy, 'foo', { value: 'bar' });
    // defineProperty()

getOwnPropertyDescriptor 获取指定对象的自身属性描述符。

getOwnPropertyDescriptor(target, property)：必须返回对象，或者undefined（属性不存在）

不变式：

如果target.property存在且不可配置，必须返回一个表示该属性存在的对象；
如果target.property存在且可配置，必须返回表示该属性可配置的对象；
如果target.property存在且target不可扩展，必须返回一个表示该属性存在的对象；
如果target.property不存在且target不可扩展，必须返回undefined表示该属性不存在；
如果target.property不存在，则不能返回表示该属性可配置的对象。

deleteProperty 用于拦截delete操作

deleteProperty(target, property)：必须返回布尔值。非布尔值会转型。

不变式：如果target.property存在且不可配置，则不能删除

ownKeys 用来拦截对象自身属性的读取操作

ownKeys(target)：必须返回包含字符串或符号的可枚举对象。

不变式：

返回的可枚举对象必须包含target的所有不可配置的自有属性；
如果target不可扩展，则返回的可枚举对象必须准确地包含自有属性键。

    {
        let target = {
            a: 1,
            b: 2,
            c: 3
        };
        let handler = {
            ownKeys(target) {
                return ['a'];
            }
        };
        let proxy = new Proxy(target, handler);
        console.log(Object.keys(proxy));//a
    }
     //上面代码拦截了对于target对象的Object.key()操作，只返回a,b,c三个属性中的a属性

getPrototypeOf 用于检查用户创建的对象的原型

getPrototypeOf(target)：必须返回对象或null。

不变式：如果target不可扩展，则Object.getPrototypeOf(proxy)唯一有效的返回值就是Object.getPrototypeOf(target)的返回值。

setPrototypeOf 设置对象原型

setPrototypeOf(target, prototype)：必须返回布尔值。非布尔值会转型。

不变式：如果target不可扩展，则唯一有效的prototype参数就是Object.getPrototypeOf(target)的返回值。

isExtensible：方法判断一个对象是否是可扩展的

isExtensible(target)必须返回布尔值。非布尔值会转型。

不变式：

如果target可扩展，必须返回true
如果target不可扩展，必须返回false

preventExtensions在调用之后，将不能再往对象中添加属性

preventExtensions(target)：必须返回布尔值。非布尔值会转型。

不变式：如果Object.isExtensible(proxy)是false，必须返回false。

apply()在函数被调用的时候捕获

返回值返回值无限制
拦截的操作

proxy(...argumentsList)
Function.prototype.apply(thisArg, argumentsList)
Function.prototype.call(thisArg, ...argumentsList)
Reflect.apply(target, thisArgument, argumentsList)

捕获器处理程序参数

target：目标对象。
thisArg：调用函数时的this参数。
argumentsList：调用函数时的参数列表

捕获器不变式 target必需是一个对象

代理模式

跟踪属性访问

可以通过get、set和has操作，知道属性对象什么时候被访问、被查询；

 const user = {
        name: 'zyzc'
    }

    const proxy = new Proxy(user, {
        get(target, property, receiver) {
            console.log(`${target} is Getting ${property}`)
            return Reflect.get(...arguments);
        },
        set(target, property, value, receiver) {
            console.log(`${target} is Setting ${property} to ${value}`);
            return Reflect.set(...arguments);
        }
    })

    proxy.name;         // [object Object] is Getting name
    proxy.age = 21;     // [object Object] is Setting age to 21

隐藏属性

使得代码对外部不可见

    const proxy = new Proxy(user, {
        get(target, property, receiver) {
            if (privateProperty.includes(property)) {
                return undefined;
            } else {
                return Reflect.get(...arguments);
            }
        },
        has(target, property, receiver) {
            if (privateProperty.includes(property)) {
                return false;
            } else {
                return Reflect.has(...arguments);
            }
        }
    })

    console.log(proxy.name);    // zyzc
    console.log(proxy.age);     // undefined
    console.log('age' in proxy);// false

属性验证

使得设置属性的时候，判断是否允许赋值

    const target = {
        name: 'zyzc',
        age: 21
    }

    const proxy = new Proxy(target, {
        set(target, property, value, receiver) {
            if (property === 'age') {
                if (typeof value === 'number') {
                    return Reflect.set(...arguments);
                } else {
                    return false;
                }
            }
        }
    })

    proxy.age = 'haha';
    console.log(proxy.age); //  21

    proxy.age = 22;
    console.log(proxy.age); //  22

函数与构造函数参数验证

    function getMedian(...nums) {
        return nums.sort()[Math.floor(nums.length / 2)];
    }

    const proxy = new Proxy(getMedian, {
        apply(target, thisArg, argumentsList) {
            for (const arg of argumentsList) {
                if (typeof arg !== 'number') {
                    throw 'You should pass a Number';
                }
            }
            return Reflect.apply(...arguments);
        }
    })
    console.log(proxy(9, 8, 7, 1, 2, 3));        // 7
    console.log(proxy("haha", 1, 2, 3, 4));     // You should pass a Number

数据绑定与观察

    const userList = [];
    class User {
        constructor(name) {
            this.name_ = name;
        }
    }
    const proxy = new Proxy(User, {
        construct() {
            const newUser = Reflect.construct(...arguments);
            userList.push(newUser);
            return newUser;
        }
    });
    new proxy('John');
    new proxy('Jacob');
    new proxy('Jingleheimerschmidt');
    console.log(userList); // [User {}, User {}, User{}]

    const userList = [];
    function emit(newValue) {
        console.log(newValue);
    }
    const proxy = new Proxy(userList, {
        set(target, property, value, receiver) {
            const result = Reflect.set(...arguments);
            if (result) {
                emit(Reflect.get(target, property, receiver));
            }
            return result;
        }
    });
    proxy.push('John');
    // John
    proxy.push('Jacob');
    // Jacob

前端贾公子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
代理与反射

ES6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体就是，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。使用代理的主要目的是定义捕获器；捕获器：处理程序对象中定义的“基本操作的拦截器”；每个程序可以包括0个或多个；每个捕获器对应一种基本操作，可以直接或间接在代理对象上调用；
复制链接

扫一扫