Reflection 基礎知識(二)-有解無憂

Proxy 定義

Proxy用于修改物件的某些行為，獲取值，設定值等

let p = new Proxy(target, handler);

target 用Proxy包裝的目標物件（可以是任何型別的物件，包括原生陣列，函式，甚至另一個代理），
一個物件，其屬性是當執行一個操作時定義代理的行為的函式，

Proxy.revocable()方法

let {proxy,revocable} = Proxy.revocable(target, handler);

target，handler引數和new Proxy()一致，
revoke()方法呼叫后，代理會變為無效狀態，

示例如下：

handler物件

handler get

攔截物件屬性值的獲取，

get(target, property, receiver)

handler set

攔截物件屬性值的設定，

set(target, property, value, receiver)

handler deleteProperty

攔截物件屬性的洗掉

deleteProperty（target, property）

handler getOwnPropertyDescriptor

攔截獲取物件屬性描述，

getOwnPropertyDescriptor(target,property)

handler defineProperty

攔截定義物件屬性的描述，

defineProperty(target,property,descriptor)

handler has

攔截判斷物件屬性是否存在

包括property in proxy 和 Reflect.has , 不包括Object.prototype.hasOwnProperty，

has(target,property)

handler ownKeys

攔截物件自身屬性key值的讀取操作，回傳字串或Symbol值陣列，

Object.getOwnPropertyNames()
Object..getOwnPropertySymbols()
Object.keys()
for...in回圈

ownKeys(target)

handler apply

攔截函式呼叫

apply(target,ctx,args)

handler construct

攔截建構式呼叫，

construct(target,args)

handler getPrototypeOf

攔截獲取物件的原型

Object.prototype.__proto__
Object.prototype.isPrototypeOf()
Object.getPrototypeOf()
Reflect.getPrototypeOf()
instanceof

getPrototypeOf(target)

handler setPrototypeOf

攔截設定物件的原型，

Object.prototype.__proto__
Object.setPrototypeOf()
Reflect.setPrototypeOf()

setPrototypeOf(target,proto)

handler isExtensible

攔截判斷物件是否可擴展

isExtensible(target)

handler preventExtensions

攔截物件的組織擴展方法

preventExtensions(target)

更多關于handler規范，請參考es2015規范的26.2.2章節，

實際應用

監聽某個物件，在執行該物件的所有函式時，列印執行前后的日志，

let obj = {
  id: 100,
  say: function () {
    console.log('say exec');
    return 'xxx'
  }
}

let handler = {
  get: function (target, property, receiver) {
    let value = https://www.cnblogs.com/likme/p/Reflect.get(target, property, receiver)
    if (typeof value ==='function') {
      return function (...rest) {
        console.log(`before ${property} exec.`);
        let res = Reflect.apply(value, target, rest);
        console.log(`after ${property} exec.`);
        return res;
      }
    } else {
      return value;
    }
  },
}
let proxy = new Proxy(obj, handler);
proxy.id
proxy.say()

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/399520.html

標籤：JavaScript

上一篇：Reflection 基礎知識(一)

下一篇：vue為什么要設計成異步佇列渲染