当前位置：首页 > news >正文

ES6入门---第三单元模块七： Proxy的使用+Reflect的使用

news 来源：原创 2025/5/11 19:40:27

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))