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"关注,也可以扫下方二维码。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180605G010S400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券