学习笔记20—代理与反射

ECMAScript6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体的说，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用，在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。目标对象既可以直接被操作，也可以通过代理来操作，但直接操作会绕过代理施予的行为。

1 空代理

最简单的代理是空代理，即除了作为一个抽象的目标对象，什么也不做。默认情况下在代理对象上执行的所有操作都会无障碍地传播到目标对象，因此在任何可以使用目标对象的地方，都可以通过同样的方式来使用与之关联的代理对象。
代理是使用Proxy构造函数创建的，这个构造函数接收两个参数：目标对象和处理程序对象，缺少其中任何一个都会抛出TypeError。要创建空代理，可以传一个简单的对象字面量作为处理程序对象。

const target = {
	id:'target'
};

const handler = {};

const proxy = new Proxy{target,handler};

//id属性会访问同一个值
console.log(target.id);
console.log(proxy.id);

//给目标属性赋值会反映在两个对象上
proxy.id = 'bar';
console.log(target.id);
console.log(proxy.id);

//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

2 捕获器

使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象中定义的基本操作拦截器。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。
所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为，比如get()捕获器会接收到目标对象，要查询的属性和代理对象三个参数。

const target = {
	foo:'bar'
};

const handler = {
	get(tarpTarget,property,receiver){
		console.log(tarpTarget === target);
		console.log(property);
		console.log(receiver === proxy);
	}
};
const proxy = new Proxy(target,hanlder);

proxy.foo;
//true
//foo
//true

所有捕获器都可以基于自己的参数重建原始操作，但并非所有捕获器行为都像get()那么简单，因此通过手写码如法炮制的想法是不现实的。实际上开发者并不需要手动重建原始行为，而是可以通过调用全局Reflect对象上的同名方法来轻松重建。处理程序对象中的所有可以捕获的方法都有对应的反射API方法，这些方法与捕获器拦截的方法具有相同名称和函数签名，而且也具有与被拦截方法相同的行为。因此使用反射API也可以像下面这样定义出空代理对象：

const target = {
	foo:'bar'
};

const handler = {
	get(){
		return Reflect.get(...arguments);
	}
};
const proxy = new Proxy(target,handler);

console.log(proxy.foo);
console.log(target.foo);

甚至还可以写的更简单一点：

const target = {
	foo:'bar'
};

const handler = {
	get:Reflect.get
};
const proxy = new Proxy(target,handler);

console.log(proxy.foo);//bar
console.log(target.foo);//bar

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

const target = {
	foo:'bar'
};

const proxy = new Proxy(target,Reflect);

console.log(proxy.foo);//bar
console.log(target.foo);//bar

反射API为开发者准备好了样板代码，在此基础上开发者可以用最少的代码修改捕获的方法。比如下面的代码在某个属性被访问时，会对返回的值进行一番修饰：

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);
console.log(target.foo);

console.log(proxy.baz);
console.log(target.baz);

3 捕获器不变式

使用捕获器几乎可以改变所有基本方法的行为，但也不是没有限制，根据ECMAScript规范，每个捕获的方法都知道目标对象的上下文，捕获函数签名，而捕获处理程序的行为必须遵循捕获器不变式，捕获器不变式因方法不同而异名，但通常都会防止捕获器定义出现过于反常的行为。
比如如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出TypeError：

const target = {};
Object.defineProperty(target,'foo',{
	configurable:false,
	writable:false,
	value:'baz'
});

const handler = {
	get(){
		return 'qux';
	}
};

const proxy = new Proxy(target,handler);
console.log(prox.foo);//TypeError

4 可撤销代理

有时候可能需要中断代理对象与目标对象之间的联系，对于使用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);//bar

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

5 实用反射API

某些情况下应该优先使用反射API，这是有一些理由的：
（1）反射API与对象API
在使用反射API是需要记住：

• 反射API并不限于捕获处理程序
• 大多数反射API方法在Object类型上有对应的方法

通常Object上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。
（2）状态标记
很多反射方法返回称作状态标记的布尔值，表示意图执行的操作是否成功。有时候状态标记比那些返回修改后的对象或者抛出错误的反射API方法更有用。例如可以使用反射API对下面的代码进行重构：

//初始代码
const o = {};

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

在定义新属性时如果发生问题，Reflect.defineProperty()会返回false，而不是抛出错误，因此使用这个反射方法可以这样重构上面的代码：

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

以下反射方法都会提供状态标记：

• Reflect.defineProperty()
• Reflect.preventExtensions()
• Reflect.setPrototypeOf()
• Reflect.set()
• Reflect.deleteProperty()

(3)用一等函数替代操作符
以下反射方法提供只有通过操作符才能完成的操作

• Reflect.get()：可以替代对象属性访问操作符
• Reflect.set()：可以替代=赋值操作符
• Reflect.has()：可以替代in操作符或with()
• Reflect.deleteProperty()：可以替代delete操作符
• Reflect.construct()：可以替代new操作符

6 代理另一个代理

代理可以拦截反射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

7 代理捕获器与反射方法

代理可以捕获13种不同的基本操作，这些操作有各自不同的反射API方法、参数、关联ECMAScript操作和不变式。正如前面所展示的，有几种不同的JavaScript操作会调用同一个捕获器处理程序。不过对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用。不存在重复被捕获的情况，只要在代理上调用，所有捕获器都会拦截它们对应的反射API操作。

• get()
• set()
• has()
• defineProperty()
• getOwnPropertyDescriptor()
• deleteProperty()
• ownKeys()
• getPrototypeOf()
• setPrototypeOf()
• isExtensible()
• preventExtensions()
• apply()
• construct()

8 代理模式

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

8.1 跟踪属性访问

通过捕获get、set和has等操作，可以知道对象属性什么时候被访问、被查询。把实现相应捕获器的某个对象代理放到应用中，可以监控这个对象何时在何处被访问过：

const user = {
	name:'Jake'
}

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 name
proxy.age = 27;//Setting age = 27

8.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

8.3 属性验证

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

const target = {
	onlyNumberGoHere: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';
console.log(proxy.onlyNumbersGoHere);//1

8.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 arguments 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{
			return Reflect.construct(...arguments);
		}
	}
});
new prox(1);

new proxy();
//Error:User cannot be instantiated without id

8.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
proxy.push('Jacob');//Jacob