es6-proxy

Posted 2022-06-03 yanloveyue

proxy :代理

增强 扩展

一个 Proxy 对象由两个部分组成： target 、 handler 。

在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。

target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。

handler:

set() 设置

get() 获取

deleteProperty() 删除

has() //有没有

apply() //调用函数

例子1:

let target = 
    name: "Tom",
    age: 24
  ;
  let handler = 
    get: function(target, key) 
      console.log("getting " + key);
      return target[key]; // 不是target.key
    ,
    set: function(target, key, value) 
      console.log("setting " + key);
      console.log(target[key])
      target[key] = value;
    
  ;
  let proxy = new Proxy(target, handler);
  proxy.name; // 实际执行 handler.get
  console.log(proxy.age)
  proxy.age = 25; // 实际执行 handler.set

例子2:创建元素

//拦截
    const DOM=new Proxy(,
        get(target,property)
            console.log(property)
            return function(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://baidu‘,‘百度‘))
   console.log(oDiv)