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参数表示要