代理与反射

EchoEcho
354 阅读7分钟

引入概念点

  • 代理

    代理是目标对象的抽象。目标对象既可以直接被操作，也可以通过代理来操作。

  • defineProperty

    在proxy之前，使用defineProperty的set和get对数据进行拦截

  • proxy

    实现对象的代理

  • Reflect

    与代理如影随形的反射API，封装了一整套与捕获器拦截的操作相对应的方法，用于拦截JS操作。

    Reflect的所有属性和方法都是静态的

进入正文

ES6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。

在ES6之前，ECMAScript中并没有类似代理的特性。

代理和反射只在百分百支持他们的平台上有用。

代理

使用代理的主要目的是可以定义捕获器，从而拦截并修改相应的行为。

默认情况下，在代理对象上执行的所有操作都会无障碍地传播到目标对象。因此，在任何可以使用目标对象的地方，都可以通过同样的方式来使用与之关联的代理对象

最简单的代理是空代理，即除了作为一个抽象的目标对象，什么也不做。

代理是使用Proxy构造函数创建的。const proxy = new Proxy(target, handler);

Proxy.prototype是undefined，因此不能使用instanceof操作符

const target = {
    id: 'target'
}
const handler = {
    get(target, property, receiver) {
        // get捕获器
        ...
    }
    set(target, property, value, receiver) {
        // set捕获器
        ...
    }
};
;
const proxy = new Proxy(target, handler);
console.log(target instanceof Proxy); // TypeError
console.log(proxy instanceof Proxy); // TypeError

严格相等可以用来区分代理和目标

console.log(target === proxy); // false
撤销代理

对于使用new Proxy()创建的普通代理来说，这种联系会在代理对象的生命周期内一直持续存在。

Proxy也暴露了revocable()方法，这个方法支持撤销代理对象与目标对象的关联。

撤销代理的操作是不可逆的。而且，撤销函数（revoke()）是幂等的，调用多少次的结果都一样

撤销代理之后再调用代理会抛出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); // foo

revoke();

console.log(proxy.foo); // TypeError

代理模式

使用代理可以在代码中实现一些有用的编程模式

  • 跟踪属性访问

    通过捕获get、set和has等操作，可以知道对象属性什么时候被访问、被查询。（案例见上文的的示例）

  • 隐藏属性

    代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也轻而易举

    const hiddenProperties = ['foo', 'bar'];
const proxy = new Proxy(target, {
    get(target, property) {
        if(hiddenProperties.includes(property)) {
            return undefined;
        } else {
            return Reflect.get(...arguments);
        }
    }
})

  • 属性验证

    因为所有赋值操作都会触发set()捕获器，所以可以根据所赋的值决定是允许还是拒绝赋值

  • 函数与构造函数参数验证

    跟保护和验证对象属性类似，也可对函数和构造函数参数进行审查。比如，可以只让函数接收某种类型的值

    function median(...nums) {
    return nums.sort()[Math.floor(nums.length / 2)]
}
const proxy = new Proxy(median, {
    apply(target, thisArg, argumentsList) {
        for(const arg of argumentsList) {
            if(typeof arg !== 'number') {
                throw 'Non-number argument provided'
            }
        }
        return Reflect.apply(...arguments);
    }
})

  • 数据绑定与可观察对象

    通过代理可以把运行时原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互相操作

    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('j');
new proxy('k');
console.log(userList); // [User {}, User {}]

代理的问题和不足

很大程度上，代理作为对象的虚拟层可以正常使用。但在某些情况下，代理也不能与现在的ECMAScript机制很好地协同

  • 代理潜在的一个问题来源是this值

    如果目标对象依赖于对象标识，那就可能碰到意料之外的问题

    const wm = new WeakMap();
class User {
    constructor(userId) {
        wm.set(this, userId);
    }
    set id(userId) {
        wm.set(this, userId);
    }
    get id() {
        return wm.get(this);
    }
}

// 由于这个实现依赖User实例的对象标识，在这个实例被代理的情况下就会出问题
const user = new User(123);
console.log(user.id); // 123
const userInstanceProxy = new Proxy(User, {});
console.log(userInstanceProxy); // undefined
/* 
   这是因为User实例一开始使用目标对象作为WeakMap的键
   代理对象却尝试从自身取得这个实例。要解决这个问题，就需要重新配置代理
*/
const UserClassProxy = new Proxy(User, {});
const proxyUser = new UserClassProxy(233);
console.log(proxyUser.id);

  • 有些ECMAScript内置类型可能会依赖代理无法控制的机制，结果导致在代理上调佣某些方法会出错

    一个典型的例子就是Date类型。Date类型方法的执行依赖this值上的内部槽位[[NumberDate]]。代理对象上不存在这个内部槽位，而且这个内部槽位的值也不能通过普通的get()和set()操作访问到，于是代理拦截后本应转发给目标对象的方法会抛出TypeError

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

捕获器

捕获器就是在处理程序对象中定义的“基本操作的拦截器”。

每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。

只有在代理对象上执行这些操作才会触发捕获器。

const target = {
    foo: 'bar'
};
const handler = {
    get() {
        return 'hello';
    }
};
const proxy = new Proxy(target, handler);

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

const target = { foo: 'bar' }
const handler = {
    get(trapTarget, proterty, receiver) {
        ...
    }
}
const proxy = new Proxy(target, handler);

所有捕获器都可以基于自己的参数重建原始操作，但并非所有捕获器行为都像get()那么简单。

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

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

反射API并不限于捕获处理程序

大多数反射API方法在Object类型上有对应的方法

const target = { foo: 'bar' }
const handler = {
    get() {
        return Reflect.get(...arguments);
    }
}
const proxy = new Proxy(target, handler);
// 更简介的写法：
const handler = {
    get: Reflect.get
}

事实上，如果真想创建一个可以捕获所有方法，然后将每个方法转发给对应反射API的空代理，那么甚至不需要定义处理程序对象：

const proxy = new Proxy(target, Reflect);
捕获器不变式

根据ECMAScript规范，每个捕获的方法都知道目标对象上下文，捕获函数签名，而捕获处理程序的行为必须遵循“捕获器不变式”。

捕获器不变式因方法不同而异，但通常都会防止捕获器定义出现过于反常的行为。比如，如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出TypeError

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

通常，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操作符

在通过apply方法调用函数时，被调用的函数可能也定义了自己的apply属性（虽然可能性极小），此时可以使用Reflect.apply来避免

Reflect.apply(myFunc, thisVal, argumentsList);

可以通过一个代理去代理另一个代理，这样可以在一个目标对象之上创建多层拦截网

代理捕获器与反射方法

avatar
文章
阅读
粉丝