js 中 Proxy get()使用方法， 以及內置各種方法

Proxy 中 有指定方法

例如：

get()   // 方法用於攔截對象的讀取屬性操作。

set() // 方法用於 攔截對象 設置屬性操作

has() // 方法是針對in操作符的代理方法。

apply() // 方法用於攔截函數的調用

construct() //  方法用於攔截 new 操作符，爲可使new操作符在生成的Proxy對象上生效，用於初始化代理的目標對象自身必須具有【Construct】內部方法（即 new target 必須是有效的）。

defineProperty() // 用於攔截對對象的object.defineProperty()操作;

deleteProperty() // 方法用於攔截對對象屬性的delete操作。

handler.getOwnPropertyDrscriptor() // 方法是Object.getOwnPropertyDescriptor()的鉤子。

handler.getPrototypeOf() // 是一個代理方法，當讀取代理對象的原型時，該方法就會被調用。

handler.isExtensible() // 用於攔截對對象的Object.isExtensible()。

 

小栗子：

    const DOM = new Proxy({}, {
      get (target, name) {
        // target 代表傳入的 Object 
        // name Object 的 key
        return function (json, ...children) {
          const el = document.createElement(name)
          // 元素添加屬性
          for (let key of Object.keys(json)) {
            el.setAttribute(key, json[key])
          }
          // 添加子元素
          for (let child of children) {
            if (Object.prototype.toString.call(child) === '[object String]') {
              child = document.createTextNode(child)
            }
            el.appendChild(child)
          }
          return el
        }
      },
      del (target, name) {}
    })

    // 傳入要創建的dom 以及屬性
    let odiv = DOM.div({id: 'div1', class:'aaa'},'第一個div', 'nihao',
      DOM.span({ onclick: 'name(this)'}, '我是span'),
      DOM.a({href: 'http://www.baidu.com', target: '_blank'}, '這是鏈接')
    )

    // 頁面加載完成之後 添加DOM
    window.onload = () => {
      document.body.appendChild(odiv)
    }