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

JS每日一題發表於2019-01-25
JS每日一題

20190124問:

如何理解es6中的Proxy？

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

Proxy（代理） 定義

可以理解為為目標物件架設一層攔截，外界對該物件的訪問，都必須通過這層攔截

簡單示例:

 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() 時。複製程式碼

為什麼要使用Proxy

  • 攔截和監視外部對物件的訪問
  • 降低函式或類的複雜度
  • 在複雜操作前對操作進行校驗或對所需資源進行管理

題外思考

如何用proxy實現雙向繫結?

往期

JS每日一題: 前端的快取有哪些？都適用什麼場景？區別是什麼？
JS每日一題: Call，Apply，Bind的使用與區別，如何實現一個bind？
JS每日一題: 說說你對前端模組化的理解
JS每日一題: web安全攻擊手段有哪些？以及如何防範

關於JS每日一題

JS每日一題可以看成是一個語音答題社群
每天利用碎片時間採用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

  • 注 絕不僅限於完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點選加入答題

來源：https://juejin.im/post/5c4b025a6fb9a049ae0843c5

相關文章