十一、Proxy 、Reflect

   ①、Proxy 的概念和常用方法

{
let obj = { //1、定义原始数据对象 对用户不可见
time: '2017-09-20',
name: 'net',
_r:
}; let monitor = new Proxy(obj, { //2、通过Proxy新生成一个对象 映射obj 代理所有对obj的操作
//拦截对象的属性读取
get(target, key){ //设置访问规则
return target[key].replace('', '');
},
set(target, key, value){ //设置修改规则
if (key === name) {
return target[key] = value; //只允许修改name
} else {
return target[key];
}
}, //拦截 key in object 操作
has(target, key){
if (key === 'name') {
return target[key]; //只暴露name属性
} else {
return false
}
}, //拦截对 delete 操作
deleteProperty(target, key){
if (key.startsWith('_')) { //只允许删除以 '_'开头的属性
delete target[key];
} else {
return target[key];
}
}, //拦截Object.keys(),Object.getOwnPropertySymbols(),Object,getOwnPropertyNames() 等方法
ownKeys(target){
return Object.keys(target).filter(item=>item != 'time'); //过滤掉 time 属性
}
});
//3、用户访问的是 monitor
console.log('get', monitor.time); //get 2018-09-20 读取的数据被代理修改了
monitor.time = '2018-01-15';
monitor.name = 'com';
console.log('set', monitor.time, monitor.name); //set 2018-09-20 net time属性的修改无法生效 console.log('has', 'name' in monitor, 'time' in monitor); //has true false time属性被我们拦截了 delete monitor.time;
delete monitor._r;
console.log('delete', monitor); //delete Proxy {time: "2017-09-20", name: "net"} _r属性被删除 而对time的操作被拦截 console.log('ownKeys', Object.keys(monitor)) //ownKeys ["name"] time属性被拦截
}

  ②、Reflect 的概念和用法

{              **同Proxy
let obj = {
time: '2017-09-20',
name: 'net',
_r:
};
// Reflect.get/set/has/ownKeys...(target,key,value);
console.log('Reflect get', Reflect.get(obj, 'time')); //Reflect get 2017-09-20 console.log('Reflect set', Reflect.set(obj, 'name', 'com'), obj);
//Reflect set true {time: "2017-09-20", name: "com", _r: 123} console.log('Reflect has', Reflect.has(obj, '_r')); //Reflect has true

  ③、使用 Proxy 和 Reflect 实现业务的解耦

function validator(target, validator) {
return new Proxy(target, { //返回一个对target的代理
_validator: validator, //接收 验证规则
set(target, key, value, proxy){ //定义 对 target的 修改规则
if (target.hasOwnProperty(key)) { //判断 target 的 key 是否存在
let vali = this._validator[key]; //去除对应key 的验证规则
if (!!vali(value)) {
return Reflect.set(target, key, value, proxy);
} else {
throw Error(`无法设置${value}到${key}`);
}
} else {
throw Error(`${key}不存在`)
}
}
});
}
const userValidator = { //定义验证规则
name(val){
return /[a-zA-Z0-9_]{3,12}/.test(val);
},
phone(val){
return /^1[3|4|5|8][0-9]\d{4,8}$/.test(val)
}
} class User{
constructor(name,phone){
this.name=name;
this.phone= phone;
return validator(this,userValidator); //得到一个 user的代理对象
}
}
let u = new User(); //初始化 得到 user 的代理
//u.name = 'a' //不符合 验证规则 抛出错误 无法设置a到name
console.log(u.name='Lain',u.phone=13797154666,u); //Proxy {name: "Lain", phone: 13797154666}

ES6新特性使用小结(四)的更多相关文章

  1. ES6新特性使用小结(三)

    九.数据类型 Symbol /* * Symbol 数据类型 概念: Symbol 提供一个独一无二的值 * */ { let a1 = Symbol(); let a2 = Symbol(); co ...

  2. ES6新特性使用小结(一)

    一.let const 命令 'use strict'; /*function test(){ //let a = 1; for(let i=1;i<3;i++){ console.log(i) ...

  3. ES6新特性使用小结(六)

    十三.promise 异步编程 ①.使用 promise 模拟异步操作 { //ES5 中的 callback 解决 异步操作问题 let ajax = function (callback) { c ...

  4. ES6新特性使用小结(二)

    六.Array 扩展 /* * Array Api Array.of 数组的构建 * */ { let arr = Array.of(, , , , , ); console.log(arr); // ...

  5. ES6新特性使用小结(五)

    十二.class 与 extends ①.类的基本定义和生成实例 { class Parent{ constructor(name='Lain'){ //定义构造函数 this.name = name ...

  6. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  7. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  8. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  9. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

随机推荐

  1. RQNOJ 622 最小重量机器设计问题:dp

    题目链接:https://www.rqnoj.cn/problem/622 题意: 一个机器由n个部件组成,每一种部件都可以从m个不同的供应商处购得. w[i][j]是从供应商j处购得的部件i的重量, ...

  2. spring属性注入DI

    spring setter方式注入: 注入对象属性: 前提: 在bean对应实体中有对应的setter方法. 基础代码: 在bean中有另一个bean属性的setter方法. package cn.i ...

  3. L98

    If there's one thing to be taught, it's dreams are made to be caught.唯有一事值得谨记,有梦想就要奋力追逐Capital punis ...

  4. Speaking 1

    What clothes do you usually like to wear?Well I like fashionable clothes, but I also want to be comf ...

  5. C语言中的文件操作

    按照字符的方式读取文件 按照行的方式读取文件 按照数据块的方式读取文件 按照格式化的方式读取文件 文件分类 记录文件:具有一定的结构记录组成,分为定长和不定长两种方式 流式文件:按照一个字符一个字符( ...

  6. JSP常见知识点

    false 7.8 磅 0 2 false false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTa ...

  7. javaScript的类型转换

    1.javaScript会自动跟据期望将值进行转换,比如 2.下面表列出了一些javaScript的自动转换,其中粗体字表示了出乎意料的转换情况 3.显示的类型转换 尽管类型可以自动进行一些转换,但是 ...

  8. P2042 [NOI2005]维护数列[splay或非旋treap·毒瘤题]

    P2042 [NOI2005]维护数列 数列区间和,最大子列和(必须不为空),支持翻转.修改值.插入删除. 练码力的题,很毒瘤.个人因为太菜了,对splay极其生疏,犯了大量错误,在此记录,望以后一定 ...

  9. 【Lintcode】077.Longest Common Subsequence

    题目: Given two strings, find the longest common subsequence (LCS). Your code should return the length ...

  10. 关于分支和主干Merge时要注意的事项

    现在我们同时在主干和分支上进行开发, 当你需要将主干上某一工程代码 Merge到分支上(或者相反)时, 不要用check out 然后全部覆盖的方法, 这样不会关联源上的任何 history, 而且需 ...