Proxy(代理)
- 给目标属性赋值会反映在两个对象上
- 给代理属性赋值会反映在两个对象上
- hasOwnProperty()方法只会应用到目标对象
- Proxy.prototype 是 undefined
- 严格相等可以用来区分代理和目标
- 可以实现多层代理
const target = {
id: 'target'
};2
const handler = {};3
const proxy = new Proxy(target, handler);
// id 属性会访问同一个值
console.log(target.id);
console.log(proxy.id);
// 给目标属性赋值会反映在两个对象上
// 因为两个对象访问的是同一个值
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
console.log(proxy instanceof Proxy); // TypeError: Function has non-object prototype
// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false
定义捕获器(trap)
- 只有在代理对象上执行这些操作才会触发捕获器
- 如果想使用原来的效果,可以手写逻辑,但并非所有都像 get()那么简单。因此,通过手动写码如法炮制的想法是不现实的,所以可以通过调用全局 Reflect 对象上(封装了原始行为)的同名方法来轻松重建。
- 所有可捕获的方法,Reflect都有相对应的同名方法
const target = {
foo: 'bar'
};
const handler = {
get() {
return Reflect.get(...arguments);
}
};
//空代理对象可以简化
const handler = {
get: Reflect.get
};
const proxy = new Proxy(target, handler);
捕获器不变式
- 防止捕获器定义出现过于反常的行为
比如,如果目标对象有一个不可配置且不可写的数据属性,那么在捕获器返回一个与该属性不同的
值时,会抛出 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
可撤销代理
- 使用 new Proxy()创建的普通代理来说,这种联系会在代理对象的生命周期内一直持续存在
- revocable()方法,支持撤销代理对象与目标对象的关联
- 撤销代理的操作是不可逆的
- 撤销代理之后再调用代理会抛出 TypeError
- 撤销函数和代理对象是在实例化时同时生成的(代替new Proxy)
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
代理的问题与不足
代理中的 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);
}
}
const user = new User(123);
console.log(user.id); // 123
const userInstanceProxy = new Proxy(user, {});
console.log(userInstanceProxy.id); // undefined
- undefined 是因为User 实例一开始使用目标对象作为 WeakMap 的键,代理对象想要从从this(指向代理对象,和map里是不同的)取得这个实例,固然取不到。
- 解决:把代理 User 实例改为代理 User 类
const UserClassProxy = new Proxy(User, {}); const proxyUser = new UserClassProxy(456); console.log(proxyUser.id);
代理与内部槽位
- 代理与内置引用类型(比如 Array)的实例通常可以很好地协同,但有些 ECMAScript内置类型可能会依赖代理无法控制的机制,结果导致在代理上调用某些方法会出错。
- 一个典型的例子就是 Date 类型。根据 ECMAScript 规范,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
Reflect(反射)
- Reflect API 并不限于用于捕获器;
- 避免直接操作 Object,起到代替作用,并修改了返回结果
使用状态替代之前返回结果
- Reflect修改了某些 Object 方法的不合理的返回结果
- 让 Object 操作都变成函数行为
- 使用布尔值(状态)来代替 Object 的一些不合理的返回值(比如返回修改后的对象或者抛出错误)
- 以下反射方法都会返回状态:
- Reflect.defineProperty()
- Reflect.preventExtensions()
- Reflect.setPrototypeOf()
- Reflect.set()
- Reflect.deleteProperty()
// 如果发生问题,会抛出错误
const o = {};
try {
Object.defineProperty(o, 'foo', 'bar');
console.log('success');
} catch(e) {
console.log('failure');
}
//使用Reflect,出错则会返回状态false
const o = {};
if(Reflect.defineProperty(o, 'foo', {value: 'bar'})) {
console.log('success');
} else {
console.log('failure');
}
替代一元表达式
- Reflect.get():可以替代对象属性访问操作符。
- Reflect.set():可以替代=赋值操作符。
- Reflect.has():可以替代 in 操作符或 with()。
- Reflect.deleteProperty():可以替代 delete 操作符。
- Reflect.construct():可以替代 new 操作符。
安全地使用函数
- 在通过 apply 方法调用函数时,被调用的函数可能也定义了自己的 apply 属性
(虽然可能性极小)为绕过这个问题,可以使用定义在 Function 原型上的 apply 方法,比如:Function.prototype.apply.call(myFunc, thisVal, argumentList);
- 这种可怕的代码完全可以使用 Reflect.apply 来避免:
Reflect.apply(myFunc, thisVal, argumentsList);
Proxy捕获器与Reflect方法
get(target,property,receiver)
- get()捕获器会在获取属性值的操作中被调用。对应的反射 API 方法为 Reflect.get()。
- 返回值无限制。
- 拦截的操作:
- proxy.property
- proxy[property]
- Object.create(proxy)[property]
- Reflect.get(proxy, property, receiver)
- 参数:
- target:目标对象
- property:目标对象上的字符串键属性,也可能是符号(symbol)键
- receiver:代理对象或继承代理对象的对象
- 捕获器不变式
- 如果 target.property 不可写且不可配置,则处理程序返回的值必须与 target.property 匹配。
- 如果 target.property 不可配置且[[Get]]特性为 undefined,处理程序的返回值也必须是 undefined。
set(target,property,value,receiver)
- set()捕获器会在设置属性值的操作中被调用。对应的反射 API 方法为 Reflect.set()。
- 返回值:
- 返回 true 表示成功;返回 false 表示失败,严格模式下会抛出 TypeError。
- 拦截的操作:
- proxy.property = value
- proxy[property] = value
- Object.create(proxy)[property] = value
- Reflect.set(proxy, property, value, receiver)
- 参数:
- target:目标对象
- property:目标对象上的字符串键属性,也可能是符号(symbol)键
- value:要赋给属性的值。
- receiver:代理对象或继承代理对象的对象
- 捕获器不变式
- 如果 target.property 不可写且不可配置,则不能修改目标属性的值。
- 如果 target.property 不可配置且[[Set]]特性为 undefined,则不能修改目标属性的值。
在严格模式下,处理程序中返回 false 会抛出 TypeError。
has(target,property)
- has()捕获器会在 in 操作符中被调用。对应的反射 API 方法为 Reflect.has()。
- has()必须返回布尔值,表示属性是否存在。返回非布尔值会被转型为布尔值。
- 拦截的操作:
- property in proxy
- property in Object.create(proxy)
- with(proxy) {(property);}
- Reflect.has(proxy, property)
- 捕获器不变式
- 如果 target.property 存在且不可配置,则处理程序必须返回 true。
- 如果 target.property 存在且目标对象不可扩展,则处理程序必须返回 true。
defineProperty(target,property,descriptor)
- defineProperty()捕获器会在 Object.defineProperty()中被调用。对应的反射 API 方法为
Reflect.defineProperty() - defineProperty()必须返回布尔值,表示属性是否成功定义。返回非布尔值会被转型为布尔值。
- 参数:
- descriptor:描述对象,enumerable、configurable、writable、value、get 和 set
- 捕获器不变式:
- 如果目标对象不可扩展,则无法定义属性。
- 不能添加同名的属性
getOwnPropertyDescriptor(target,property)
- getOwnPropertyDescriptor() 捕获器会在 Object.getOwnPropertyDescriptor() 中被调
用。对应的反射 API 方法为 Reflect.getOwnPropertyDescriptor()。 - getOwnPropertyDescriptor()必须返回对象,或者在属性不存在时返回 undefined。
- 捕获器不变式
- 如果自有的 target.property 存在且不可配置,则处理程序必须返回一个表示该属性存在的对象。
- 如果自有的 target.property 存在,必须返回表示该属性可配置的对象。
- 如果 target.property 不存在且 target 不可扩展,则处理程序必须返回 undefined 表示该属性不存在。
- 如果 target.property 不存在,则处理程序不能返回表示该属性可配置的对象。
deleteProperty(target,property)
- deleteProperty() 捕获器会在 delete 操作符中被调用。对应的反射 API 方法为 Reflect.
deleteProperty()。 - deleteProperty()必须返回布尔值,表示删除属性是否成功。返回非布尔值会被转型为布尔值。
- 拦截的操作
- delete proxy.property
- delete proxy[property]
- Reflect.deleteProperty(proxy, property)
- 捕获器不变式
+如果自有的 target.property 存在且不可配置,则处理程序不能删除这个属性。
ownKeys(target)
- ownKeys()捕获器会在 Object.keys()及类似方法中被调用。对应的反射 API 方法为Reflect.ownKeys()。
- ownKeys()必须返回包含字符串或Symbol的可枚举对象。
- 拦截的操作
- Object.getOwnPropertyNames(proxy)
- Object.getOwnPropertySymbols(proxy)
- Object.keys(proxy)
- Reflect.ownKeys(proxy)
- 捕获器不变式
- 返回的可枚举对象必须包含 target 的所有不可配置的自有属性。
- 如果 target 不可扩展,则返回可枚举对象必须准确地包含自有属性键。
getPrototypeOf(target)
- getPrototypeOf()捕获器会在 Object.getPrototypeOf()中被调用。对应的反射 API 方法为Reflect.getPrototypeOf()。
- getPrototypeOf()必须返回对象或 null。
- 拦截的操作
- Object.getPrototypeOf(proxy)
- Reflect.getPrototypeOf(proxy)
- proxy.proto
- Object.prototype.isPrototypeOf(proxy)
- proxy instanceof Object
- 捕获器不变式
- 如果 target 不可扩展,则 Object.getPrototypeOf(proxy)唯一有效的返回值就是Object.getPrototypeOf(target)的返回值。
setPrototypeOf(target,prototype)
- setPrototypeOf()捕获器会在 Object.setPrototypeOf()中被调用。对应的反射 API 方法为
Reflect.setPrototypeOf()。 - setPrototypeOf()必须返回布尔值,表示原型赋值是否成功。返回非布尔值会被转型为布尔值。
- 拦截的操作
- Object.setPrototypeOf(proxy)
- Reflect.setPrototypeOf(proxy)
- 捕获器不变式
- 如果 target 不可扩展,则唯一有效的 prototype 参数就是Object.getPrototypeOf(target)的返回值。
isExtensible(target)
- isExtensible() 捕 获 器 会 在 Object.isExtensible() 中 被 调 用 。 对应 的 反 射 API 方法 为Reflect.isExtensible()。
- isExtensible()必须返回布尔值,表示 target 是否可扩展。返回非布尔值会被转型为布尔值。
- 捕获器不变式
- 如果 target 可扩展,则处理程序必须返回 true。
- 如果 target 不可扩展,则处理程序必须返回 false。
preventExtensions(target)
- preventExtensions()捕获器会在 Object.preventExtensions()中被调用。对应的反射 API方法为 Reflect.preventExtensions()。
- preventExtensions()必须返回布尔值,表示 target 是否已经不可扩展。返回非布尔值会被转型为布尔值。
- 捕获器不变式
- 如果 Object.isExtensible(proxy)是 false,则处理程序必须返回 true。
apply(target,thisArg,argumentsList)
- apply()捕获器会在调用函数时中被调用。对应的反射 API 方法为 Reflect.apply()。
- 拦截的操作
- proxy(…argumentsList)
- Function.prototype.apply(thisArg, argumentsList)
- Function.prototype.call(thisArg, …argumentsList)
- Reflect.apply(target, thisArgument, argumentsList)
- 捕获器不变式
- target 必须是一个函数对象。
construct(target,argumentsList,newTarget)
- apply()捕获器会在调用函数时中被调用。对应的反射 API 方法为 Reflect.apply()。
- construct()必须返回一个对象。
- 参数:
- argumentsList:传给目标构造函数的参数列表。
- newTarget:最初被调用的构造函数。
- 拦截的操作
- new proxy(…argumentsList)
- Reflect.construct(target, argumentsList, newTarget)
- 捕获器不变式
- target 必须可以用作构造函数。