ES6入门---第三单元 模块七： Proxy的使用+Reflect的使用
proxy: 代理
扩展(增强)对象、方法(函数)一些功能
比如:
Vue
Vue.config.keyCodes.enter=65
Proxy作用: 比如vue中拦截
预警、上报、扩展功能、统计、增强对象等等
proxy是设计模式一种， 代理模式
语法:
new Proxy(target, handler);
let obj = new Proxy(被代理的对象,对代理的对象做什么操作)
handler:
{
set(){}, //设置的时候干的事情
get(){}, //获取干的事情
deleteProperty(){}, //删除
has(){} //问你有没有这个东西 ‘xxx’ in obj
apply() //调用函数处理
.....
}
let obj = {name:'Strive'};let newObj = new Proxy(obj,{//代理objget(target, property){//property 属性 get是获取信息//console.log(target, property);//TODOconsole.log(`您访问了${property}属性`);return target[property];//没有return返回值会都出现undefined}});console.log(newObj.name);
实现一个，访问一个对象身上属性，默认不存在的时候给了undefined，希望如果不存在错误(警告)信息：
let newObj = new Proxy(obj, {get(target, property){if(property in target){return target[property];}else{//throw new ReferenceError(`${property}属性不在此对象上`);console.warn(`${property}属性不在此对象上`);return '^_^';//替换了出现的undefined}}});
DOM.div()
DOM.a();
DOM.ul()
例：
<script>const DOM = new Proxy({},{get(target, property){//console.log(target, property);//property就是DOM.xxx 里面的xxxreturn function(attr={}, ...children){//json的内容，其他内容//console.log(attr, children);const el = document.createElement(property);//添加属性for(let key of Object.keys(attr)){el.setAttribute(key, attr[key]);}//添加子元素for(let child of children){if(typeof child == 'string'){child = document.createTextNode(child);//创建文本节点}el.appendChild(child);//添加}return el;}}});let oDiv = DOM.div({id:'div1',class:'aaa'},'我是div','呵呵呵');//json,内容，……console.log(oDiv);</script> const DOM = new Proxy({},{get(target, property){//console.log(target, property);//property DOM.xxx 里面的xxxreturn function(attr={}, ...children){//console.log(attr, children);const el = document.createElement(property);//添加属性for(let key of Object.keys(attr)){el.setAttribute(key, attr[key]);}//添加子元素for(let child of children){if(typeof child == 'string'){child = document.createTextNode(child);}el.appendChild(child);}return el;}}});let oDiv = DOM.div({id:'div1',class:'aaa'},'我是div','呵呵呵',DOM.a({href:'http://www.51mmr.net'}, '访问官网'),DOM.ul({},DOM.li({},'1111'),DOM.li({},'2222'),DOM.li({},'3333'),DOM.li({},'4444')));window.onload=function(){document.body.appendChild(oDiv);};set(), 设置，拦截:
设置一个年龄，保证是整数，且范围不能超过200
let obj =new Proxy({},{set(target, prop, value){if(prop == 'age'){if(!Number.isInteger(value)){throw new TypeError(`年龄必须为整数`);}if(value>200){throw new RangeError('年龄超标了，必须小于200岁');}}target[prop]=value; }});obj.a=123;obj.name = 'Strive';console.log(obj);obj.age = 201;deleteProperty(): 删除，拦截:
let json = {a:1,b:2};let newJson = new Proxy(json, {deleteProperty(target, property){console.log(`您要删除${property}属性`);//TODOdelete target[property];}});delete newJson.a;console.log(newJson);
has(): 检测有没有
let newJson = new Proxy(json, {deleteProperty(target, property){console.log(`您要删除${property}属性`);//TODOdelete target[property];},has(target, property){console.log(`判断是否存在调用has方法`);//TODOreturn property in target;}});console.log('a' in newJson);
apply(target,context指向,args参数数组) :拦截方法
function fn(){return '我是函数';}let newFn = new Proxy(fn, {apply(){return '函数么?';}});console.log(newFn());
Reflect: 反射
将Object.xxx 语言内部方法如：Object.defineProperty放到Reflect对象身上
通过Reflect对象身上直接拿到语言内部东西
比如：
'assign' in Object -> Reflect.has(Object, 'assign')
delete json.a -> Reflect.deleteProperty(json, 'a');
let json ={a:1, b:2};/* delete json.a;console.log(json); */Reflect.deleteProperty(json, 'a');console.log(json);
Reflect.apply(调用的函数，this指向，参数数组);与fn.call() fn.apply() 作用类似
let res = Reflect.apply(Math.ceil,null, [9.8]);//变形式调用函数console.log(res); function show(...args){console.log(this);console.log(args);}//show(1,2,3,4);//show.call('abc', 1,2,3,4);将this改变成abc//show.apply('abcd',[1,2,3,4]);Reflect.apply(show, 'aaaa', [1,2,3,4]); function sum(a,b){return a+b;}let newSum = new Proxy(sum, {apply(target, context, args){//console.log(target, context, args);//console.log(...arguments);return Reflect.apply(...arguments);}});console.log(newSum(2,3))