介绍

• 使用者无权访问目标对象
• 中间加代理，通过代理做授权和控制
• 科学上网、明星经纪人

UML类图

代理模式.png

示例

class LoadImg {
  constructor(fileName) {
    this.fileName = fileName
    this.loadFromDisk()
  }
  loadFromDisk() {
    console.log(`从${this.fileName}加载中...`)
  }
  // 假设无法直接访问display
  display() {
    console.log('展示')
  }
}
class ProxyImg {
  constructor(fileName) {
    this.loadImg = new LoadImg(fileName)
  }
  display() {
    this.loadImg.display()
  }
}
const proxyImg = new ProxyImg('123.png')
proxyImg.display()

bind()也属于代理，把this代理到函数中（Jquery中$.proxy(fn, this)也是一样）

<div>点点点点</div>
<script>
  document.querySelector('div').addEventListener('click', function() {
  setTimeout(function() {
    this.style.setProperty('background-color', 'red')
  }.bind(this), 2000)
})

es6中的Proxy

1. 动态生成element

const DOM = new Proxy({}, {
  get(target, property) {
    return function(attr = {}, ...children) {
      const element = document.createElement(property)
      for (let i in attr) {
        element.setAttribute(i, attr[i])
      }
      for (let i of children) {
        if (typeof i === 'string') {
          i = document.createTextNode(i)
        }
        element.appendChild(i)
      }
      return element
    }
  }
})
const body = document.querySelector('body')
const newElement = DOM.div({ class: 'box1' }, '我是box1', '哈哈哈哈', DOM.a({ href: 'www.baidu.com' }, '百度'))
body.appendChild(newElement)

2. apply() has() deleteProperty() 等

es6中的Reflect

1. ES6 为了操作对象而提供的新 API
2. 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上
3. 修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false
4. 让Object操作都变成函数行为
5. Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法

代理模式vs适配器模式

• 适配器模式：提供不一样的接口
• 代理模式：提供一致的接口

代理模式vs装饰器模式

• 装饰器模式：扩展功能，原有的功能不变且可直接使用
• 代理模式：显示原有功能，但是经过限制或者阉割之后的