ES6知识点整理之Proxy的应用实例详解
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了ES6知识点整理之Proxy的应用,结合实例形式详细分析了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); // 效果等同于狼蚁网站SEO优化的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程序设计有所帮助。
上一篇：理理Vue细节（推荐）
下一篇：js实现删除li标签一行内容