ES6知识点整理之Proxy的应用实例详解

本文实例讲述了ES6知识点整理之Proxy的应用。分享给大家供大家参考,具体如下:

Proxy 用于修改对象某些操作的默认行为,可以对外界的访问进行过滤和改写,其概念类似于元编程。

Proxy 让我们可以对任何对象的绝大部分行为进行监听和干涉,实现更多的自定义程序行为。在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截。

目前【兼容性】存在一定的问题,目前在chrome和ff浏览器中的非严格模式下可用,一些先进的技术即使在目前不能广泛应用,但随着时间的流逝,都将会进入程序员日常的编程中。

注: 博客整理时间:2018-03-24 16:21:15

初识Proxy

var obj = {name:'Joh'};

var proxy = new Proxy(obj, {

get (target, key) {

return 'test1';

},

set (target, key, value) {

target[key] = value

}

});

console.log(proxy.name); // test1 进行get取值

proxy.name = 'test2'; // 进行set设置

console.log(obj.name); // test2

通过Proxy对象进行拦截target对象的属性

完整的使用Proxy进行设置, 获取,修改和删除的案例

var obj = {name:'Joh',group:'g1',_type:'student'};

var proxy = new Proxy(obj, {

get (target, key) {

if(key[0]!== '_') {

// return Reflect.get(target,key); // 效果等同于下面的return语句

return target[key];

};

},

set (target, key, value) {

if(key[0]!== '_') {

// Reflect.set(target,key,value);

return target[key] = value;

}

},

deleteProperty(target, key) {

// 业务逻辑

if(key[0] !== '_') {

// Reflect.deleteProperty(target, key);

delete target[key];

}

}

});

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

console.log(obj.name); // Joh

proxy.name = 'Lily'; // 在非严格模式下的赋值操作,严格模式将会报错

console.log(obj.name); // Lily

delete proxy.name; // 未能成功删除,因为上面内部有判断

console.log(obj.name); // undefined 成功删除

delete proxy.group;

console.log(obj.group); // undefined 成功删除

delete proxy._type;

console.log(obj._type); // student

proxy.color='red';

console.log(obj.color); // red

其中借助Reflect实现和直接实现的效果等同

通过has方法和in关键字进行拦截的示例:

var obj = {name:"Joh",_name:"Lily"};

var proxy = new Proxy(obj, {

has(target, key) {

if(key[0] === '_'){

return false;

} else {

return key in target;

}

}

});

console.log('has name attr: ', 'name' in proxy); // has name attr: true

console.log('has _name attr: ', '_name' in proxy); // has _name attr: false

使用ownKeys方法与for-in遍历过滤符合特定规则属性的示例

var obj = {name:"Joh",_name:"Lily", age:10, group:"g1"};

var proxy = new Proxy(obj, {

ownKeys (target) {

return Reflect.ownKeys(target).filter(key => key[0] !== '_');

}

});

for(var k in proxy) {

console.log(k); // 分别输出 name age group 过滤了 _name

}

通过apply方法对函数调用的拦截

function test() {

console.log('hello world');

}

var proxyFun = new Proxy(test,{

apply(target,ctx,args) {

console.log('proxy apply');

return Reflect.apply(target,ctx,args);

}

});

proxyFun(); // 分别输出 proxy apply 和 hello world

// proxyFun.apply(); // 同样,分别输出 proxy apply 和 hello world

// proxyFun.call(); // 同样,分别输出 proxy apply 和 hello world

通过construct方法对构造函数实例化的拦截

function User() {

console.log('this is a contructor');

}

var ClassProxy = new Proxy(User, {

construct(target,args) {

console.log('proxy construct');

return Reflect.construct(target,args);

}

});

new ClassProxy(); // 分别输出 proxy construct 和 this is a contructor

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上是 ES6知识点整理之Proxy的应用实例详解 的全部内容, 来源链接: utcz.com/z/336376.html

回到顶部