3、代理模式

代理模式：为对象的操作提供一个替代或代理接口。

代理模式允许我们在访问目标对象之前、之后或者代替目标对象执行额外的操作，从而对原始对象的行为进行增强、控制、限制或者扩展。

动态代理：在运行时动态生成代理类及其实例

ES6 的 Proxy 就是一个代理，它对对象的增删改查进行拦截代理，可自定义执行操作

虚拟代理：在运行时去执行操作，节省开销

场景：实现图片的懒加载

const createImage = () => {
  const imgEl = document.createElement('img')
  
  document.body.appendChild(imgEl)

  return {
    setUrl(src) {
      imgEl.src = src
    }
  }
}

const { setUrl } = createImage()

const createImageProxy = () => {
  const img = new Image()

  img.onload = function(){
    // 设置已加载好的图
    setUrl(this.src)
  }

  return {
    setUrl(src) {
      // 先设置 loading 占位图
      setUrl('http://imgcache.qq.com/loading.jpg')

      img.src = src
    }
  }
}

createImageProxy().setUrl('http://imgcache.qq.com/Kdhwbas.jpg')

保护代理：用于控制对目标对象的访问，比如限制对某些敏感信息或方法的访问权限。

总结：本质就是套一层过滤壳，壳里面再去调用真正的方法