es6-proxy

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)