目录
2.5 getOwnPropertyDescriptor()-!bool
ECMAScript 6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。
1. 代理基础
代理是目标对象的抽象,它可以用作目标对象的替身,但又完全独立于目标对象。
目标对象既可以直接被操作,也可以通过代理来操作。但直接操作会绕过代理施予的行为。
1.1 创建空代理
最简单的代理是空代理,即除了作为一个抽象的目标对象,什么也不做。
代理是使用Proxy构造函数创建的。这个构造函数接收两个参数:目标对象和处理程序对象。缺少其中任何一个参数都会抛出TypeError。要创建空代理,可以传一个简单的对象字面量作为处理程序对象,从而让所有操作畅通无阻地抵达目标对象。
const target = {
id: 'target'
};
const handle = {};
const proxy = new Proxy(target, handle);
// 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
// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false
1.2 定义捕获器
使用代理的主要目的是可以定义捕获器(trap)。
捕获器就是在处理程序对象中定义的“基本操作的拦截器”。
每个处理程序对象可以包含零个或多个捕获器,每个捕获器都对应一种基本操作,可以直接或间接在代理对象上调用。
每次在代理对象上调用这些基本操作时,代理可以在这些操作传播到目标对象之前先调用捕获器函数,从而拦截并修改相应的行为。
定义一个get()捕获器。
注意,只有在代理对象上执行这些操作才会触发捕获器。
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
1.3 捕获器参数和反射API
get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数
const target = {
foo: 'bar'
};
const handler = {
get (trapTarget, property, receiver) {
console.log(trapTarget === target);
console.log(property);
console.log(receiver === proxy);
}
}
const proxy = new Proxy(target, handler);
proxy.foo;
// true
// foo
// true
反射API
处理程序对象中所有可以捕获的方法都有对应的反射(Reflect)API的同名方法。
const target = {
foo: 'bar'
};
const handler = {
get () {
return Reflect.get(...arguments) +' test';
}
// 简写(不如不写,仅能返回”值“,不能装饰)
// get:Reflect.get
}
const proxy = new Proxy(target, handler);
console.log(proxy.foo); // foo
console.log(target.foo); // foo
1.4 捕获器不变式
使用捕获器几乎可以改变所有基本方法的行为,但也不是没有限制。
捕获处理程序的行为必须遵循“捕获器不变式”(trap invariant)。
捕获器不变式因方法不同而异,但通常都会防止捕获器定义出现过于反常的行为。
比如,如果目标对象有一个不可配置且不可写的数据属性,那么在捕获器返回一个与该属性不同的值时,会抛出TypeError:
const target = {};
Object.defineProperty(target, 'foo', {
configurable: false,
writable: false,
value: 'bar'
});
const handler = {
get() {
return 'test'
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo); // TypeEroor
1.5 可撤销代理
revocable()方法,这个方法支持撤销代理对象与目标对象的关联。
撤销函数revoke()是幂等的,调用多少次的结果都一样。
撤销代理之后再调用代理会抛出TypeError。
注:没有new关键字
const target = {
foo: 'bar'
};
const handler = {
get() {
return 'test'
}
};
const {proxy, revoke} = Proxy.revocable(target, handler);
console.log(proxy.foo); // test
console.log(target.foo); // bar
revoke();
console.log(proxy.foo); // TypeError
1.6 实用反射API
某些情况下应该优先使用反射API
1.6.1 反射API与对象API
在使用反射API时,要记住:
1. 反射API不限于捕获处理程序
2. 大多数反射API方法在Object类型上有对应的方法。
Object上的方法适用于通用程序,而反射方法适用于细粒度的对象控制与操作。
1.6.2 状态标记(书中举例造成歧义)
很多反射方法返回称作“状态标记”的布尔值,表示意图执行的操作是否成功。
在定义新属性时如果发生问题,Reflect.defineProperty()会返回false,而不是抛出错误。
例如,可以使用反射API对下面的代码进行重构:
书中举例:
// 初始代码
const o = {};
try {
Object.defineProperty(o, 'foo', 'bar');
console.log('success');
} catch (e) {
console.log('failure');
}
// 输出 failure
// 使用Reflect重构
if(Reflect.defineProperty(o, 'foo', {value: 'bar'})) {
console.log('success');
} else {
console.log('failure');
}
// 输出 success
槽点:没有用相同操作进行举例,如下1和2两条关键代码
// 1.语法本身就有问题
Object.defineProperty(o, 'foo', 'bar');
// 2.返回状态标记true
Reflect.defineProperty(o, 'foo', {value: 'bar'});
// 3.会抛出错误,没有返回false,本身语法就有问题,肯定报错
// 书中举例造成理解歧义,以为用了Reflect.defineProperty就不会抛出错误
Reflect.defineProperty(o, 'foo', 'bar');
更正举例:
事先添加属性foo,并设置为不可写,为Reflect.defineProperty返回false创造条件
// 初始代码
const o = {};
Object.defineProperty(o, 'foo', {
writable: false
})
try {
Object.defineProperty(o, 'foo', {value: 'bar'});
console.log('success');
} catch (e) {
console.log('failure');
}
// 输出 failure
// 使用Reflect重构
let statusMark = Reflect.defineProperty(o, 'foo', {value: 'bar'})
if(statusMark) {
console.log('success');
} else {
console.log('failure');
}
// 输出 failure
以下反射方法都会提供状态标记
Reflect.defineProperty()
Reflect.preventExtensions()
Reflect.setPrototypeOf()
Reflect.set()
Reflect.deleteProperty()
1.6.3 用一等函数替代操作符
优点:如1.6.2
Reflect.get():可以替代对象属性访问操作符。
Reflect.set():可以替代=赋值操作符。
Reflect.has():可以替代in操作符或with()。
Reflect.deleteProperty():可以替代delete操作符。
Reflect.construct():可以替代new操作符。
1.6.4 安全的应用函数
在通过apply方法调用函数时,被调用的函数可能也定义了自己的apply属性(虽然可能性极小)。为绕过这个问题,可以使用定义在Function原型上的apply方法,比如:
Function.prototype.apply.call(myFunc, thisVal, argumentList);
更好的方法(原型也省了)
Reflect.apply(myFunc, thisVal, argumentsList);
1.7 代理另一个代理
代理可以拦截反射API的操作,而这意味着完全可以创建一个代理,通过它去代理另一个代理。
这样就可以在一个目标对象之上构建多层拦截网:
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
1.8 代理的问题与不足
在某些情况下,代理不能与现在的ECMAScript机制很好地协同。
1.8.1 代理中的this
方法中的this通常指向调用这个方法的对象:
const target = {
thisValEqualsProxy() {
return this === proxy;
}
}
const proxy = new Proxy(target, {});
console.log(target.thisValEqualsProxy()); // false
console.log(proxy.thisValEqualsProxy()); // true
如果目标对象依赖于对象标识,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.id); // undefined
// 这是因为User实例一开始使用目标对象作为WeakMap的键,代理对象却尝试从自身取得这个实例
// 解决方法
// 把代理User实例改为代理User本身,然后再创建代理的实例
// 这样就会以代理实例作为WeakMap的键了
const UserClassProxy = new Proxy(User, {});
const ProxyUser = new UserClassProxy(456);
console.log(ProxyUser.id); // 456
1.8.2 代理与内部槽位
根据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
2. 代理捕获器与反射方法
代理可以捕获13种不同的基本操作。
这些操作有各自不同的反射API方法、参数、关联ECMAScript操作和不变式。
2.1 get()-!bool
get()捕获器会在获取属性值的操作中被调用。
对应的反射API方法为Reflect.get()。
const target = {
foo: 'bar'
};
const handler = {
get (trapTarget, property, receiver) {
console.log('get()')
return Reflect.get(...arguments);
}
};
const proxy = new Proxy(target, handler);
proxy.foo
// get();
1. 返回值无限制
2. 拦截的操作
proxy.property
proxy[property]
Object.create(proxy)[property]
Reflect.get(proxy,property,receiver)
3. 捕获器处理程序参数
trapTarget: 目标对象
property: 目标对象上的属性
receiver: 代理对象或继承代理对象的对象
4. 捕获器不定式
如果target.property不可写且不可配置,则处理程序返回的值必须与target.property匹配。
如果target.property不可配置且[[Get]]特性为undefined,处理程序的返回值也必须是undefined。
2.2 set()
set()捕获器会在设置属性值的操作中被调用。
对应的反射API方法为Reflect.set()。
const target = {
foo: 'bar'
};
const handler = {
set (trapTarget, property, value, receiver) {
console.log('set()')
return Reflect.set(...arguments);
}
};
const proxy = new Proxy(target, handler);
proxy.foo = 'foo';
// set();
1. 返回值
返回true表示成功;返回false表示失败,严格模式下会抛出TypeError。
2. 拦截的操作
proxy.property = value
proxy[property] = value
Object.create(proxy)[property] = value
Reflect.set(proxy,property,value,receiver)
3.捕获器处理程序参数
trapTarget: 目标对象
property: 目标对象上的属性
value: 要赋给属性的值
receiver: 接收最初赋值的对象
4. 捕获器不变式
如果target.property不可写且不可配置,则不能修改目标属性的值。
如果target.property不可配置且[[Set]]特性为undefined,则不能修改目标属性的值。
在严格模式下,处理程序中返回false会抛出TypeError。
2.3 has()
has()捕获器会在in操作符中被调用。对应的反射API方法为Reflect.has()。
const target = {
foo: 'bar'
};
const handler = {
has (trapTarget, property) {
console.log('has()')
return Reflect.has(...arguments);
}
};
const proxy = new Proxy(target, handler);
'foo' in proxy;
// has();
1. 返回值
has()必须返回布尔值,表示属性是否存在。返回非布尔值会被转型为布尔值。
2.拦截的操作
property in proxy
property in Object.create(proxy)
with(proxy) {(property); }
Reflect.has(proxy, property)
3.捕获器处理程序参数
TrapTarget:目标对象。
property: 目标对象上的属性
4. 捕获器不变式
如果target.property存在且不可配置,则处理程序必须返回true。
如果target.property存在且目标对象不可扩展,则处理程序必须返回true。
2.4 difineProperty()
defineProperty()捕获器会在Object.defineProperty()中被调用。
对应的反射API方法为Reflect.defineProperty()。
const target = {
foo: 'bar'
};
const handler = {
defineProperty(trapTarget, property, descriptor) {
console.log("defineProperty()");
return Reflect.defineProperty(...arguments);
}
};
const proxy = new Proxy(target, handler);
Object.defineProperty(proxy, 'foo', {value: 'bar'});
// defineProperty();
1. 返回值
defineProperty()必须返回布尔值,表示属性是否成功定义。返回非布尔值会被转型为布尔值。
2.拦截的操作
Object.defineProperty(proxy, property, descriptor)
Reflect.defineProperty(proxy, property, descriptor)
3.捕获器处理程序参数
TrapTarget:目标对象。
property: 目标对象上的属性
descriptor:包含可选的enumerable、configurable、writable、value、get和set定义的对象。
4. 捕获器不变式
如果目标对象不可扩展,则无法定义属性。
如果目标对象有一个可配置的属性,则不能添加同名的不可配置属性。
如果目标对象有一个不可配置的属性,则不能添加同名的可配置属性。
一句话概括,不可更改目标对象的固有配置,只能装饰。
2.5 getOwnPropertyDescriptor()-!bool
getOwnPropertyDescriptor()捕获器会在Object.getOwnPropertyDescriptor()中被调用。
对应的反射API方法为Reflect.getOwnPropertyDescriptor()。
const target = {
foo: 'bar'
};
const handler = {
getOwnPropertyDescriptor(trapTarget, property) {
console.log("getOwnPropertyDescriptor()");
return Reflect.getOwnPropertyDescriptor(...arguments);
}
};
const proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, 'foo');
// getOwnPropertyDescriptor();
1. 返回值
getOwnPropertyDescriptor()必须返回对象,或者在属性不存在时返回undefined。
2.拦截的操作
Object.getOwnPropertyDescriptor(proxy, property)
Reflect.getOwnPropertyDescriptor(proxy, property)
3.捕获器处理程序参数
TrapTarget:目标对象。
property: 目标对象上的属性
4. 捕获器不变式
如果自有的target.property存在且不可配置,则处理程序必须返回一个表示该属性存在的对象。
如果自有的target.property存在且可配置,则处理程序必须返回表示该属性可配置的对象。
如果自有的target.property存在且target不可扩展,则处理程序必须返回一个表示该属性存在的对象。
如果target.property不存在且target不可扩展,则处理程序必须返回undefined表示该属性不存在。
如果target.property不存在,则处理程序不能返回表示该属性可配置的对象。
2.6 deleteProperty()
deleteProperty()捕获器会在delete操作符中被调用。对应的反射API方法为Reflect. deleteProperty()。
const target = {
foo: 'bar'
};
const handler = {
deleteProperty(trapTarget, property) {
console.log("deleteProperty()");
return Reflect.deleteProperty(...arguments);
}
};
const proxy = new Proxy(target, handler);
delete proxy.foo;
// deleteProperty();
1. 返回值
deleteProperty()必须返回布尔值,表示删除属性是否成功。返回非布尔值会被转型为布尔值。
2.拦截的操作
delete proxy.property
delete proxy[property]
Reflect.deleteProperty(proxy, property)
3.捕获器处理程序参数
TrapTarget:目标对象。
property: 目标对象上的属性
4. 捕获器不变式
如果自有的target.property存在且不可配置,则处理程序不能删除这个属性。
2.7 ownKeys()-!bool
ownKeys()捕获器会在Object.keys()及类似方法中被调用。对应的反射API方法为Reflect. ownKeys()。
const target = {
foo: 'bar'
};
const handler = {
ownKeys(trapTarget) {
console.log("ownKeys()");
return Reflect.ownKeys(...arguments);
}
};
const proxy = new Proxy(target, handler);
Object.keys(proxy);
// ownKeys();
1. 返回值
ownKeys()必须返回包含字符串或符号的可枚举对象。
2.拦截的操作
Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
Reflect.ownKeys(proxy)
3.捕获器处理程序参数
TrapTarget:目标对象。
4. 捕获器不变式
返回的可枚举对象必须包含target的所有不可配置的自有属性。
如果target不可扩展,则返回可枚举对象必须准确地包含自有属性键。
2.8 getPrototypeOf()-!bool
getPrototypeOf()捕获器会在Object.getPrototypeOf()中被调用。
对应的反射API方法为Reflect.getPrototypeOf()。
const target = {
foo: 'bar'
};
const handler = {
getPrototypeOf(trapTarget) {
console.log("getPrototypeOf()");
return Reflect.getPrototypeOf(...arguments);
}
};
const proxy = new Proxy(target, handler);
Object.getPrototypeOf(proxy);
// getPrototypeOf();
1. 返回值
getPrototypeOf()必须返回对象或null。
2.拦截的操作
Object.getPrototypeOf(proxy)
Reflect.getPrototypeOf(proxy)
proxy.__proto__
Object.prototype.isPrototypeOf(proxy)
proxy instanceof Object
3.捕获器处理程序参数
TrapTarget:目标对象。
4. 捕获器不变式
如果target不可扩展,则Object.getPrototypeOf(proxy)唯一有效的返回值就是Object. getPrototypeOf(target)的返回值。
2.9 setPrototypeOf()
setPrototypeOf()捕获器会在Object.setPrototypeOf()中被调用。
对应的反射API方法为Reflect.setPrototypeOf()。
const target = {
foo: 'bar'
};
const handler = {
setPrototypeOf(trapTarget, prototype) {
console.log("setPrototypeOf()");
return Reflect.setPrototypeOf(...arguments);
}
};
const proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, Object);
// setPrototypeOf();
1. 返回值
setPrototypeOf()必须返回布尔值,表示原型赋值是否成功。返回非布尔值会被转型为布尔值。
2.拦截的操作
Object.setPrototypeOf(proxy)
Reflect.setPrototypeOf(proxy)
3.捕获器处理程序参数
TrapTarget:目标对象。
prototype:target的替代原型,如果是顶级原型则为null。
4. 捕获器不变式
如果target不可扩展,则唯一有效的prototype参数就是Object.getPrototypeOf(target)的返回值。
2.10 isExtensible()
isExtensible()捕获器会在Object.isExtensible()中被调用。对应的反射API方法为Reflect.isExtensible()。
const target = {
foo: 'bar'
};
const handler = {
isExtensible(trapTarget) {
console.log("isExtensible()");
return Reflect.isExtensible(...arguments);
}
};
const proxy = new Proxy(target, handler);
Object.isExtensible(proxy);
// isExtensible();
1. 返回值
isExtensible()必须返回布尔值,表示target是否可扩展。返回非布尔值会被转型为布尔值。
2.拦截的操作
Object.isExtensible(proxy)
Reflect.isExtensible(proxy)
3.捕获器处理程序参数
TrapTarget:目标对象。
4. 捕获器不变式
如果target可扩展,则处理程序必须返回true, 反之false。
2.11 preventExtensions()
preventExtensions()捕获器会在Object.preventExtensions()中被调用。对应的反射API方法为Reflect.preventExtensions()。
const target = {
foo: 'bar'
};
const handler = {
preventExtensions(trapTarget) {
console.log("preventExtensions()");
return Reflect.preventExtensions(...arguments);
}
};
const proxy = new Proxy(target, handler);
Object.preventExtensions(proxy);
// preventExtensions();
1. 返回值
preventExtensions()必须返回布尔值,表示target是否已经不可扩展。返回非布尔值会被转型为布尔值。
2.拦截的操作
Object.preventExtensions(proxy)
Reflect.preventExtensions(proxy)
3.捕获器处理程序参数
TrapTarget:目标对象。
4. 捕获器不变式
如果Object.isExtensible(proxy)是false,则处理程序必须返回true。
2.12 apply()-!bool
apply()捕获器会在调用函数时中被调用。对应的反射API方法为Reflect.apply()。
const target = () => {
foo: 'bar'
};
const handler = {
apply(trapTarget, thisArg, ...argumentsList) {
console.log("apply()");
return Reflect.apply(...arguments);
}
};
const proxy = new Proxy(target, handler);
proxy();
// apply();
1. 返回值无限制
2.拦截的操作
proxy(...argumentsList)
Function.prototype.apply(thisArg, argumentsList)
Function.prototype.call(thisArg, ...argumentsList)
Reflect.apply(target, thisArgument, argumentsList)
3.捕获器处理程序参数
TrapTarget:目标对象。
thisArg:调用函数时的this参数。
argumentsList:调用函数时的参数列表
4. 捕获器不变式
target必须是一个函数对象。
2.13 construct()-!bool
construct()捕获器会在new操作符中被调用。对应的反射API方法为Reflect.construct()。
const target = function() {
foo: 'bar'
};
const handler = {
construct(trapTarget, argumentsList, newTarget) {
console.log("construct()");
return Reflect.construct(...arguments);
}
};
const proxy = new Proxy(target, handler);
new proxy;
// construct();
1. 返回值
construct()必须返回一个对象。
2.拦截的操作
new proxy(...argumentsList)
Reflect.construct(target, argumentsList, newTarget)
3.捕获器处理程序参数
TrapTarget:目标构造函数。
argumentsList:传给目标构造函数的参数列表。
newTarget:最初被调用的构造函数。
4. 捕获器不变式
target必须可以用作构造函数。
3. 代理模式
使用代理可以在代码中实现一些有用的编程模式。
3.1 跟踪属性访问
通过捕获get、set和has等操作,可以知道对象属性什么时候被访问、被查询。
const user = {
name: 'jie'
};
const proxy = new Proxy(user, {
get (target, property, receiver) {
console.log(`Getting ${property}`);
return Reflect.get(...arguments);
},
set (target, property, value, receiver) {
console.log(`Setting ${property} = ${value}`);
return Reflect.set(...arguments);
}
});
proxy.name; // Getting jie
proxy.age = 99; // Setting age = 99;
3.2 隐藏属性
代理的内部实现对外部代码是不可见的,因此要隐藏目标对象上的属性也轻而易举。比如:
const hiddenProperties = ['foo', 'bar'];
const targetObject = {
foo: 1,
bar: 2,
baz: 3
};
const proxy = new Proxy(targetObject, {
get(target, property) {
if (hiddenProperties.includes(property)) {
return undefined;
} else {
return Reflect.get(...arguments);
}
},
has(target, property) {
if (hiddenProperties.includes(property)) {
return false;
} else {
return Reflect.has(...arguments);
}
}
});
// get()
console.log(proxy.foo); // undefined
console.log(proxy.bar); // undefined
console.log(proxy.baz); // 3
// has()
console.log('foo' in proxy); // false
console.log('bar' in proxy); // false
console.log('baz' in proxy); // true
3.3 属性验证
因为所有赋值操作都会触发set()捕获器,所以可以根据所赋的值决定是允许还是拒绝赋值:
const target = {
onlyNumbersGoHere: 0
};
const proxy = new Proxy(target, {
set(target, property, value) {
if (typeof value !== 'number') {
return false;
} else {
return Reflect.set(...arguments);
}
}
});
proxy.onlyNumbersGoHere = 1;
console.log(proxy.onlyNumbersGoHere); // 1
proxy.onlyNumbersGoHere = '2'; // 严格模式下抛出TypeError
console.log(proxy.onlyNumbersGoHere); // 1
3.4 函数与构造函数参数验证
跟保护和验证对象属性类似,也可对函数和构造函数参数进行审查。
比如,可以让函数只接收某种类型的值:
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);
}
});
console.log(proxy(4, 7, 1)); // 4
console.log(proxy(4, '7', 1));
// Error: Non-number argument provided
类似地,可以要求实例化时必须给构造函数传参:
class User {
constructor(id) {
this.id_ = id;
}
}
const proxy = new Proxy(User, {
construct(target, argumentsList, newTarget) {
if (argumentsList[0] === undefined) {
throw 'User cannot be instantiated without id';
} else {
console.log(argumentsList); // [1]
return Reflect.construct(...arguments);
}
}
});
new proxy(1);
new proxy();
// Error: User cannot be instantiated without id
3.5 数据绑定与可观察对象
通过代理可以把运行时中原本不相关的部分联系到一起。这样就可以实现各种模式,从而让不同的代码互操作。
比如,可以将被代理的类绑定到一个全局实例集合,让所有创建的实例都被添加到这个集合中:
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
// 1
proxy.push('Jacob');
// Jacob
// 2
proxy.push('test');
// test
// 3