Proxy

概述

Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。
Proxy可以理解为，在目标对象之前架设一层"拦截"，外界对该对象的访问，都必须先通过这层拦截 ，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy的原意是代理，用在这里表示它来”代理“某些操作，可以译为”代理器“。

var obj=new Proxy({},{
	get:function(target,propKey,receiver){
		console.log(`getting ${propKey}!`);
		return Reflect.get(target,propKey,receiver);
	},
	set:function(target,propKey,value,receiver){
		console.log(`setting ${propKey}!`);
		return Reflect.set(target,propKey,value,receiver);
	}
})

上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象obj，去读写他的属性，就会得到下面的结果。

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

上面代码说明，Proxy实际上重载了点运算符，即用自己的定义覆盖了语言的原始定义。
ES6原生提供了Proxy构造函数，用来生成Proxy实例。

var proxy=new Proxy(target,handler);

Proxy对象的所有用法,都是上面这种形式，不同的是handler参数的写法。其中，new Proxy（）表示生成一个proxy 实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
下面是另一个拦截读取属性行为的例子。

var proxy=new Proxy({},{
	get:function(target,propKey){
		return 35;
	}
});

proxy.time  //35
proxy.name  //35
proxy.title //35

上面的代码中，作为构造函数，Proxy接收两个参数。第一个参数是所要代理的目标对象(上例是一个空对象)，即如果没有Proxy的介入，操作原来要访问的就是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。比如，上面代码中，配置对象有个get方法，用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回35，所以访问任何属性都得到35。

注意：要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。
如果handler没有设置任何拦截，那就等同于直接通向原对象。

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。

一个技巧就是将Proxy对象，设置到object.proxy属性，从而可以在object对象上调用。

var object = { proxy: new Proxy(target, handler) };

Proxy实例也可以作为其他对象的原型对象。

var proxy=new Proxy({},{
	get:function(target,propKey){
		return 35;
	}
})

let obj=Object.create(proxy);
obj.time //35

上面代码中，proxy对象是obj对象的原型，obj对象本身并没有time属性，所以根据原型链 ，会在proxy对象上读取该属性，导致被拦截。

同一个拦截器函数，可以设置拦截多个操作。

Proxy实例的方法

• get()
  get方法用于拦截某个属性的读取操作，可以接受三个参数，依次是目标对象、属性名和proxy实例本身（严格来说，是操作行为所针对的对象），其中最后一个参数可选。

get方法的用法，上文已经有一个实例，下面是一个拦截读取操作的例子。

var person={
	name:"张三"
};
var proxy=new Proxy(person,{
	get:function(target,propKey){
		if(propKey in target){
			return target[propKey];
		}else{
			throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.")
		}
	}
});

proxy.name //“张三”
proxy.age  //“抛出一个错误”

上面的代码表示，如果访问目标对象不存在的属性，会抛出一个错误。如果没有拦截，访问不存在的属性，只会返回undefined。

get方法可以继承。

let proto=new Proxy({},{
	get(target,propertyKey,receiver){
		console.log('GET'+propertyKey);
		return target[propertyKey];
	}
})

let obj=Object.create(proto);
obj.foo//"GET foo"

上面的代码中，拦截操作定义在Prototype对象上面，所以如果读取obj对象继承的属性时，拦截会生效。

• set()
  set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和Proxy实例本身，其中最后一个参数可选。

假定Person对象有一个age属性，该属性应该是一个不大于200的整数，那么可以使用proxy保证age的属性值符合要求。

let validator={
	set:function(obj,prop,value){
		if(prop==='age'){
			if(!Number.isInteger(value)){
				throw new TypeError('The age is not an integer');
			}
			if(value>200){
				throw new RangeError('The age seems invalid');
			}
		}
		obj[prop]=value;
		return true;
	}
};

let person=new Proxy({},validator);

person.age //100
person.age='young' //报错
person.age=300 //报错

上面代码中，由于设置了存值函数set，任何不符合要求的age属性赋值，都会抛出一个错误，这是数据验证的一种实现方法。利用set方法，还可以数据绑定，即每当对象发生改变的时候，会自动更新DOM。

有时，我们会在对象上设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用。结合get和set方法，就可以做到防止这些内部属性被外部读写。

const handler={
	get(target,key){
		invariant(key,'get');
		return target[key];
	},
	set(target,key){
		invariant(key,'set');
		target[key]=value;
		return true;
	}
};
function invariant(key,action){
	if(key[0]==='_'){
		throw new Error(`Invalid attempt to ${action} private "${key}" property`);
	}
}

const target={};
const proxy=new Proxy(target,handler);
proxy._prop
// Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c'
// Error: Invalid attempt to set private "_prop" property

上面的代码中，只要读写的属性名的第一个字符是下划线，一律抛错，从而达到禁止读写内部属性的目的。

• apply（）
  apply方法拦截函数的调用、call和apply操作。
  apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

var handler={
	apply(target,ctx,args){
		return Reflect.apply(...arguments);
	}
}

下面是一个例子。

var target=function(){
	return 'I am the target';
}
var handler={
	apply:function(){
		return 'I am the proxy';
	}
};
var p=new Proxy(target,handler);
p();
//I am the proxy;

上面的代码中，变量p是Proxy的实例，当他作为函数调用时（p（）），就会被apply方法拦截，返回一个字符串。