JS每日一題: 如何理解es6中的Proxy？

時間 2019-11-08

標籤每日如何理解 es6 proxy 欄目 JavaScript 简体版

原文原文鏈接

20190124問:

如何理解es6中的Proxy？前端

試題解析:對proxy的理解，可能會延伸到vue的雙向綁定vue

Proxy（代理）定義

能夠理解爲爲目標對象架設一層攔截，外界對該對象的訪問，都必須經過這層攔截es6

簡單示例:web

const obj = new Proxy({}, {
     get: (target, key, receiver) => {
         return 'JS'
         console.log(`get ${key}`)
     },
     set: (target, key, value, receiver) => {
         console.log(`set ${key}`)
     },
 })
 
 obj.name = 'JS 每日一題' 
 // set name
 // JS 每日一題
 
 obj.name 
 // 這裏進入get的回調函數，全部直接返回 JS 
複製代碼

從上面的示例中能夠看出，Proxy存在一種機制，能夠對外界的讀寫操做進行改寫緩存

Proxy 實例方法

proxy除了代理get,set操做，還能代理其它的操做，以下安全

handler.getPrototypeOf()

// 在讀取代理對象的原型時觸發該操做，好比在執行 Object.getPrototypeOf(proxy) 時。

handler.setPrototypeOf()

// 在設置代理對象的原型時觸發該操做，好比在執行 Object.setPrototypeOf(proxy, null) 時。

handler.isExtensible()

// 在判斷一個代理對象是不是可擴展時觸發該操做，好比在執行 Object.isExtensible(proxy) 時。

handler.preventExtensions()

// 在讓一個代理對象不可擴展時觸發該操做，好比在執行 Object.preventExtensions(proxy) 時。

handler.getOwnPropertyDescriptor()

// 在獲取代理對象某個屬性的屬性描述時觸發該操做，好比在執行 Object.getOwnPropertyDescriptor(proxy, "foo") 時。

handler.defineProperty()

// 在定義代理對象某個屬性時的屬性描述時觸發該操做，好比在執行 Object.defineProperty(proxy, "foo", {}) 時。

handler.has()

// 在判斷代理對象是否擁有某個屬性時觸發該操做，好比在執行 "foo" in proxy 時。

handler.get()

// 在讀取代理對象的某個屬性時觸發該操做，好比在執行 proxy.foo 時。

handler.set()

// 在給代理對象的某個屬性賦值時觸發該操做，好比在執行 proxy.foo = 1 時。

handler.deleteProperty()

// 在刪除代理對象的某個屬性時觸發該操做，好比在執行 delete proxy.foo 時。

handler.ownKeys()

// 在獲取代理對象的全部屬性鍵時觸發該操做，好比在執行 Object.getOwnPropertyNames(proxy) 時。

handler.apply()

// 在調用一個目標對象爲函數的代理對象時觸發該操做，好比在執行 proxy() 時。

handler.construct()

// 在給一個目標對象爲構造函數的代理對象構造實例時觸發該操做，好比在執行new proxy() 時。

複製代碼