建站
咨询
售后
建站咨询
ES6中Proxy和Reflect的示例分析-创新互联
这篇文章主要介绍ES6中Proxy和Reflect的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
Proxy代理
{
// 原始对象，或者真实数据，可以理解为供应商
let obj = {
time: '2018-10-05',
name: 'lucy',
age: 16,
_is: true
};
// 代理对象，可以理解为代理商，对用户来说，直接操作monitor，而不能直接操作obj
let monitor = new Proxy(obj, {
// 拦截对象属性的读取
get(target, key) {
return target[key].replace('2018', '2019');
},
// 拦截对象设置属性
set(target, key, value) {
// 只让用户修改name属性，其他的不允许修改
if (key === 'name') {
return target[key] = value;
} else {
return target[key];
}
},
// 拦截 key in object 操作
has(target, key) {
// 只暴露name属性，其他的都不暴露
if (key === 'name') {
return target[key];
} else {
return false;
}
},
// 拦截delete
deleteProperty(target, key) {
// 属性名以_下划线开头的，就允许删除，否则不允许删除
if (key.indexOf('_') > -1) {
delete target[key];
return true;
} else {
return target[key];
}
},
// 拦截Object.keys Object.getOwnPropertySymbols, Object.getOwnPropertyNames
ownKeys(target) {
// 拦截了time属性
return Object.keys(target).filter(item => item != 'time');
}
});
console.log('get', monitor.time); // 2019-10-05
monitor.time = '2020';
monitor.name = 'can';
console.log('set', monitor.time, monitor.name); // 2019-10-05 can
console.log('has', 'name' in monitor, 'time' in monitor); // true false
delete monitor.time;
delete monitor._is;
console.log(monitor); // Proxy {time: "2018-10-05", name: "can", age: 16}
console.log('ownKeys', Object.keys(monitor)) // ["name", "age"]
}Reflect反射
反射的是 object，Reflect的方法跟Proxy一样，都有get,set,has...
{
let obj = {
time: '2018-10-05',
name: 'ahhh',
age: 16,
_is: true
};
console.log(Reflect.get(obj, 'time')); // 2018-10-05
Reflect.set(obj, 'name', 'lxc');
console.log(obj); // {time: "2018-10-05", name: "lxc", age: 16, _is: true}
console.log(Reflect.has(obj, 'name')); // true
}数据校验例子
{
function validator(target, validator) {
return new Proxy(target, {
_validator: validator,
// 对set进行拦截
set(target, key, value, proxy) {
if (target.hasOwnProperty(key)) {
let va = this._validator[key]; // 拿到_validator配置好的方法
if (!!va(value)) {
// 允许修改
return Reflect.set(target, key, value, proxy);
} else {
// 抛出异常
throw Error(`不能设置${key}到${value}`);
}
} else {
throw Error(`${key} 不存在`);
}
}
});
}
const personValidators = {
name(val) {
// 如果name设置为字符串，则允许修改，否则抛出异常
return typeof val === 'string';
},
age(val) {
// 如果age设置为数值类型并且大于18，则允许修改，否则抛出异常
return typeof val === 'number' && val > 18;
}
};
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
// 返回了一个Proxy对象，用户操作的并不是Person这个实例，而是这个实例的代理对象
return validator(this, personValidators);
}
}
const person = new Person('haha', 18);
console.log(person); // Proxy {name: "haha", age: 18}
// person.name = 46; // 不能设置name到46
// person.age = 20; // 不能设置age到12
// person.number = 111; // number 不存在
person.name = 'yoyo';
person.age = 20;
console.log(person); // Proxy {name: "yoyo", age: 20}
}以上是“ES6中Proxy和Reflect的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页标题：ES6中Proxy和Reflect的示例分析-创新互联
文章位置：http://lswzjz.com/article/dpeice.html
