博客目标
到此Es6的更新小编已经更新完,喜欢小编的点个关注不迷路。only老k将持续更新博客
存在原因
Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。
Proxy
Proxy 可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。
案例讲解就完事
案例一
new Proxy相当于创建了一个Proxy实例,target为所要拦截的目标对象,handler也是一个对象里面定义的是对拦截对象所要进行的拦截方法。
let target={
name:'only老k',
age:20
};
//案例一:
console.log('案例一')
let handler = {
get(target, name) {
console.log('getting:' + name);
return target[name]
}
};
let pro=new Proxy(target,handler);
console.log(pro.name);
console.log(pro.age);
//new Proxy相当于创建了一个Proxy实例,target为所要拦截的目标对象,handler也是一个对象
//里面定义的是对拦截对象所要进行的拦截方法。
案例二
拦截操作对象handler为空,未对拦截对象设定拦截方法,该情况下pro直接指向原对象target,访问pro等同于访问target,所以结果为target中的结果。
console.log('案例二');
let handle={
}
let pro=new Proxy(target,handle);
console.log(pro.name);//only老K
案例三
上述实例将pro作为obj的原型对象使用,虽然obj本身没有name这个属性,但是根据原型链,会在pro上读取到name属性,之后会执行相对应的拦截操作。
console.log('案例三');
let handle={
get(target,name){
console.log('getting:'+name);
return target[name];
}
}
let pro=new Proxy(target,handle);
console.log(pro.name);
Proxy常用的拦截方法
案例四
get(target, propKey, receive)方法,用于拦截某个读取属性的操作,第一个参数为目标对象,第二个参数为属性名称,第三个属性为操作所针对的对象(可选参数)。
let handle={
get(target,propKey,receiver){
if(propKey in target){
console.log("success");
}else {
console.log("error");
}
return Reflect.get(target,propKey,receiver);
}
}
let pro=new Proxy(target,handle);
console.log(pro.name);
console.log(pro.arg);//没有
案例五
set(target, propKey, value, receiver),用于拦截某个属性的赋值操作,第一个参数为目标对象,第二个参数为属性名,第三个参数为属性值,第四个参数为操作行为所针对的对象(可选参数)。
console.log('案例五');
let handle={
get(target,propKey,receiver){
if(propKey in target){
console.log("success");
}else {
console.log("error");
}
return Reflect.get(target,propKey,receiver);
},
set(target,propKey,value,receiver){
if(propKey=='age'){
if(!Number.isInteger(value)){
throw new TypeError('The age is not an integer');
}else {
console.log("set success");
}
}else {
console.log('set sucess');
}
return Reflect.set(target,propKey,value,receiver);
}
}
let pro=new Proxy({},handle);
console.log(pro.age=100);//显示正常
console.log(pro.age='呵呵');//显示报错的内容
案例六
has(target, propKey)用来拦截对象是否具有某个属性值的操作,第一个参数为目标对象,第二个参数为属性名
let handle={
has(target,proKey){
console.log('handle has');
return proKey in target;
}
}
let cunzai={name:'only老k'};
let pro=new Proxy(cunzai,handle);
console.log('name' in pro);
Reflect
Reflect 可以用于获取目标对象的行为,它与 Object 类似,但是更易读,为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。
get
//Reflect的静态方法
console.log('Reflect的静态方法');
// get
console.log('get');
let exam={
name:'only老K',
age:20,
get info(){
return this.name+this.age;
}
}
console.log(Reflect.get(exam,'name'));
//当target对象中存在name属性个getter方法,getter方法的this会绑定
let receiver={
name:'onlyK',
age:20
}
console.log(exam,'info',receiver);
//当name为不存在target对象的属性时;返回undefined
console.log(Reflect.get(exam,'bbb'));
//当target不是对象时,会报错
console.log(Reflect.get(1,'name'));//TypeError
set
//set
console.log('set');
let exam={
name:'only老K',
age:24,
set info(value){
return this.age=value;
}
}
console.log(exam.age);//24
console.log(Reflect.set(exam,'age',50));//true
console.log(exam.age);//50
// value 为空时会将 name 属性清除
console.log(Reflect.set(exam,'age',));//true
console.log(exam.age);//undefined
还有很多后面小编这里不全部测试了,有兴趣的可以自己去看
传送门
上篇博客
下篇博客
小编Es6系列暂时先更新到这里,后续有需要小编会继续更新。
喜欢小编的点波关注不迷路。