Proxy代理之ES6篇

这个词在JavaScript中是否感到些许陌生呢？他是ES6新增的一个对象，用于代理原对象的一个新型对象，下面，我就简单介绍一下其入门用法~

Proxy的get方法:

简单介绍一下这个方法:该方法用于拦截访问对象的属性。

varAnimal= {

name:'dog'

}

varproxy=newProxy(Animal,{

get(){

console.log("拦截成功");

}

});

proxy.name;//拦截成功

在这里需要注意的是，要想拦截发挥作用，就必须使用Proxy的实例化对象。如使用Animal.name不受拦截，依旧会输出dog。只有在访问proxy实例化对象的属性值(无论原对象的属性值是否在)，才会执行get方法。

还能向get中传入参数，如:

varAnimal= {

name:'dog'

}

varproxy=newProxy(Animal,{

get(obj,property){

console.log(obj[property]);

}

});

proxy.name;//dog

其中的obj是原对象，property是在调用代理对象的属性时传入的属性名，如上是proxy.name，传入的是name。

想让get方法真正有用，可以尝试在get方法体中，加入各种语句，增加该属性的访问权限。如下:

varAnimal= {

name:'dog',

action:'eat'

}

varproxy=newProxy(Animal,{

get(obj,property){

if(obj[property] ==='dog'){

console.log(`动物的名字叫:${property}`);

}elseif(obj[property] ==='eat'){

console.log(`行为:${property}`);

}

}

});

proxy.name;//动物的名字叫:dog

proxy.action;//行为:eat

最后需要注意的是:Proxy的实例化对象中含有get方法就不能简单的通过该实例化对象访问到原对象的属性值，如:

varAnimal= {

name:'dog'

}

varproxy=newProxy(Animal,{

get(){

}

});

console.log(proxy.name);//undefined

但可以通过在get中增加返回值或输出值来输出原对象的属性:

varAnimal= {

name:'dog'

}

varproxy=newProxy(Animal,{

get(obj,property){

returnobj[property];

}

});

console.log(proxy.name);//dog

Proxy的set方法:

简单介绍一下这个方法:该方法用于拦截修改对象的值

下面看个例子:

varAnimal= {

name:'dog',

action:'eat'

}

varproxy=newProxy(Animal,{

set(){

console.log("成功拦截");

}

});

proxy.name=3;//成功拦截

set方法接收三个参数:原对象、属性名与属性值，举个例子:

varAnimal= {

name:'dog',

action:'eat'

}

varproxy=newProxy(Animal,{

set(obj,property,value){

console.log(obj[property]);

console.log(value);

}

});

proxy.name='cat';//dog

//cat

这里的value是指新的属性值，要注意的是:就算在代理对象中修改了属性值，原对象的属性值还是不会改变的，因此要改成下列语句:

varAnimal= {

name:'dog',

action:'eat'

}

varproxy=newProxy(Animal,{

set(obj,property,value){

console.log(obj[property]);

console.log(value);

obj[property] =value;//新增的语句，没有该语句，Animal中的name属性值依旧是dog

}

});

proxy.name='cat';

console.log(Animal.name);//cat

还有一点需要注意:如果同时使用get和set方法，不会同时触发两个方法:

varAnimal= {

name:'dog',

action:'eat'

}

varproxy=newProxy(Animal,{

get(){

console.log("我访问了属性");

},

set(){

console.log("我修改了属性值");

}

});

proxy.name='cat';//我修改了属性值

proxy.name;//我访问了属性

从上面的例子看出，修改属性值不同于我们所想象般同时触发访问属性的方法get。

this的指向问题

废话不多说，直接看例子:

varAnimal= {

action1(){

returnthis===proxy;

},

action2(){

returnthis===Animal;

}

}

varproxy=newProxy(Animal, {});

console.log(proxy.action1());//true

console.log(Animal.action1());//false

console.log(proxy.action2());//false

console.log(Animal.action2());//true

在调用Proxy的实例化对象的属性时，其指向的是Proxy实例化对象，调用原对象时依旧是指向原对象，这点需要注意~

喜欢的小伙伴们可以点击左上角"Miku灬Rua"关注，也可以扫下方二维码。