代理模式

为其他对象提供一种代理以控制对这个对象的访问。

代理模式使得代理对象控制具体对象的引用。

• ES5

class Star{
  play(){
    console.log("演戏")
  }
}

class StarProxy{
  constructor(){
    this.superStar = new Star()
  }

  talk(price){
    if(price >= 10000){
      this.superStar.play()
    }else{
      throw new Error("价钱不合适")
    }
  }
}

let jr = new StarProxy()
jr.talk(1000)
jr.talk(10000)

• ES6

class Star{
  name: "tom",
  workprice: 10000,
}

let proxy = new Proxy(star, {
  get(target, key){
    if(key === "workprice"){
      console.log("访问了")
    }
    return target[key]
  }

  set(target, key, value){
    if(key === "workprice"){
      console.log("设置了")
      if(value>10000){
        console.log("可以合作")
      }else{
        throw new Error("价钱不合适")
      }
    }
  }
})

小例子

仿vue代理

// <div id="box"></div>

// js部分
let vueobj = {}

let proxy = new Proxy(vueobj, {
  get(target, key){
    return target[key]
  },
  set(target, key, value){
    if(key==="data"){
      box.innerHTML = value
    }
    target[key] = value
  }
})