ES6中的代理（Proxy）和反射（Reflection）

Markxu 發(fā)布于2019-08-23 16:13 / 3019人閱讀

摘要：代理和反射的定義調(diào)用可常見代替其它目標(biāo)對(duì)象的代理，它虛擬化了目標(biāo)，所以二者看起來功能一致。代理可攔截引擎內(nèi)部目標(biāo)的底層對(duì)象操作，這些底層操作被攔截后會(huì)觸發(fā)響應(yīng)特定操作的陷阱函數(shù)。

代理和反射的定義

調(diào)用 new Proxy() 可常見代替其它目標(biāo) (target) 對(duì)象的代理，它虛擬化了目標(biāo)，所以二者看起來功能一致。

代理可攔截JS引擎內(nèi)部目標(biāo)的底層對(duì)象操作，這些底層操作被攔截后會(huì)觸發(fā)響應(yīng)特定操作的陷阱函數(shù)。

反射 API 以 Reflect 對(duì)象的形式出現(xiàn)，對(duì)象中方法的默認(rèn)特性與相同的底層操作一致，而代理可以覆寫這種操作，每一個(gè)代理陷阱對(duì)應(yīng)一個(gè)命名和參數(shù)都相同的 Reflect 方法。

應(yīng)用

基礎(chǔ)用法

let target = {};
let p = new Proxy(target, {});

p.a = 37;   // 操作轉(zhuǎn)發(fā)到目標(biāo)

console.log(target.a);    // 37. 操作已經(jīng)被正確地轉(zhuǎn)發(fā)

get、set、has、deleteProperty的使用

get() 方法用于攔截對(duì)象的讀取屬性操作

set() 方法用于攔截設(shè)置屬性值的操作

has() 方法可以看作是針對(duì) in 操作的鉤子

deleteProperty() 方法用于攔截對(duì)對(duì)象屬性的 delete 操作

let target = {
  name: "target",
  color: "blue",
  size: 50,
  skill: "drink"
}
let proxy = new Proxy(target, {
  set: function(trapTarget, key, value, receiver) {
    // 忽略不希望受到影響的已有屬性
    if(!trapTarget.hasOwnProperty(key)) {
      if(isNaN(value)) {
        throw new TypeError("屬性必須是數(shù)字！")
      }
    }
    //添加屬性
    return Reflect.set(trapTarget, key, value, receiver)
  },

  get: function(trapTarget, key, receiver) {
    if(!(key in receiver)) {
      throw new TypeError(key + "屬性不存在！")
    }

    return Reflect.get(trapTarget, key, receiver)
  },

  has: function(trapTarget, key) {
    if(key === "color") {
      return false
    }else {
      return Reflect.has(trapTarget, key)
    }
  },

  deleteProperty: function(trapTarget, key) {
    if(key === "skill") {
      return false
    }else {
      return Reflect.deleteProperty(trapTarget, key)
    }
  }

});

//添加一個(gè)新屬性
proxy.count = 1
console.log(target.count) //1
proxy.name = "proxy"
console.log(proxy.name) //proxy
console.log(target.name) //proxy
proxy.anotherName = "proxy" //拋出錯(cuò)誤: 屬性必須是數(shù)字！

console.log(proxy.age) //拋出錯(cuò)誤：age屬性不存在！

console.log("name" in proxy) //true
console.log("color" in proxy)  //false


console.log("size" in proxy) //true
let result1 = delete proxy.size
console.log("size" in proxy) //false

console.log("skill" in proxy) //true
let result2 = delete proxy.skill
console.log("skill" in proxy) //true

參考

《深入理解ES6》