介绍

  • 使用者无权访问目标对象
  • 中间加代理，通过代理做授权和控制

示例

  • 科学上网，访问github.com
  • 明星经纪人

UML类图

点击查看【processon】

代码

  1. // 明星
  2. let star = {
  3.     name: '张XX',
  4.     age: 25,
  5.     phone: '13910733521'
  6. }
  8. // 经纪人
  9. let agent = new Proxy(star, {
  10.     get: function (target, key) {
  11.         if (key === 'phone') {
  12.             // 返回经纪人自己的手机号
  13.             return '18611112222'
  14.         }
  15.         if (key === 'price') {
  16.             // 明星不报价，经纪人报价
  17.             return 120000
  18.         }
  19.         return target[key]
  20.     },
  21.     set: function (target, key, val) {
  22.         if (key === 'customPrice') {
  23.             if (val < 100000) {
  24.                 // 最低 10w
  25.                 throw new Error('价格太低')
  26.             } else {
  27.                 target[key] = val
  28.                 return true
  29.             }
  30.         }
  31.     }
  32. })
  34. // 主办方
  35. console.log(agent.name)
  36. console.log(agent.age)
  37. console.log(agent.phone)
  38. console.log(agent.price)
  40. // 想自己提供报价（砍价，或者高价争抢）
  41. agent.customPrice = 150000
  42. // agent.customPrice = 90000  // 报错：价格太低
  43. console.log('customPrice', agent.customPrice)

场景

  2. - $.proxy
  3. ```javascript
  4. $("#d1").click(function() {
  5.   const fn = function() {
  6.     setTimeout($.proxy(function() {
  7.     // this 符合期望
  8.     $(this).addClass('d2')
  9.   }, this), 1000)
  10.   }
  11. })
  12. // =>>
  13. $("#d1").click(function() {
  14.   let fn = function() {
  15.    $(this).addClass('d2')
  16.   }
  17.   fn = $.proxy(fn, this)
  18.   setTimeout(fn, 1000)
  19. })
  • es6的proxy
  • 在家访问公司内网，利用代理

代理模式和适配器模式比较

  • 适配器模式：提供不同的接口（如不同版本的插头）
  • 代理模式：提供一摸一样的接口

代理模式和装饰器模式比较

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