阅读背景:

es6-Proxy、Reflect_ngd-b的博客

来源:互联网 
Proxy

拦截操作、修改对象的默认行为。

// target参数表示要拦截的目标对象,handler参数处理拦截行为。
var proxy = new Proxy(target,handler);
var user = {
	name:'admin',
	age:'22'
}
1.get()
var proxy = new Proxy(user,{
	get(target,property) {
		if(property in target){
			return target[property];
		}else{
			throw new ReferenceError("Property \ "+property+" \" does not exist");
		}
	}
});
proxy.name;              //"admin"
proxy.pass;               // 抛出错误
// 如果没有拦截操作,访问不存在的属性会返回undefined。
// 实现数组读取负数索引
function createArray(...item){
	let handler = {
		get(target,prop,receiver) {
			let index = Number(prop);
			if(index < 0){
				prop = String(target.length+index);
			}
			return Reflect.get(target,prop,receiver);
		}
	}
	let target = [];
	target.push(...item);
	return new Proxy(target,handler);
}
let arr = createArray(3,4,5);
arr[2];           //5
arr[-1];          //5
2.set()
利用set方法,可以数据绑定,即对象发生变化时,会自动更新DOM。
let proxy = new Proxy(user,{
	set(target,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");
			}
		}
		target[prop] = value;
	}
});
proxy.age;           //22
proxy.age = "hello";           //抛处一个错误,‘The age is not an integer’
proxy.age = 300;              //抛处一个错误,‘The age seems invalid’
3.可拦截操作过滤掉私有属性,以‘_’为前缀的属性。
> has()/拦截 in 操作符
var handler = {
	has(target,key) {
		if(key[0] === '_'){
			return false;
		}
		return key in target;
	}
}
var target = {_name:'admin',name:'xiao li'};
var proxy = new Proxy(target,handler);
'_name' in proxy;            //false;
'_name' in target;             //true
> enumerate()/拦截for...in循环                                 **未支持
var handler = {
	enumerate(target) {
		return Object.keys(target).filter(key=>key[0]!=='_')[Symbol.iterator]();
	}
}
var target = {name:'admin',_name:'System',_age:'34'};
var proxy = new Proxy(target,handler);
for(let key in proxy){
	console.log(key);
}             //name
> getPrototypeOf()
拦截以下操作:
	Object.getPrototypeOf();
	Object.prototype.__proto__;
	Object.prototype.isPrototypeOf();
	Object.getPrototypeOf();
	Reflect.getPrototypeOf();
	instanceOf运算符
// target参数表示要



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: